首页 > 数据库 >asp.netcore8 + vue3 + mysql 自用记账项目(二)环境搭建

asp.netcore8 + vue3 + mysql 自用记账项目(二)环境搭建

时间:2024-09-11 12:03:47浏览次数:9  
标签:vue -- vue3 netcore8 asp mysql 3306 docker 安装

一、vue

1、node.js安装

安装node.js的攻略网上有很多,这里就不多做赘述,安装完成后,验证是否正常

然后就是配置淘宝镜像加速,配置环境变量等操作。

2、vue安装

上面安装完node.js之后,就可以安装vue环境了,网上同样很多,需要注意的是,vue安装完成了,最好将webpack模版、vue-cli、vue-router一起安装。

基础安装完成后,创建vue项目,相对更熟悉JavaScript模式,看个人喜好选择配置,然后在项目里添加vant手机端组件库,前端页面主要通过vant组件实现。(vant4组件链接

二、docker

 服务器安装docker和docker-compose工具,并配置淘宝镜像加速,下载相关镜像等。

三、数据库

安装完docker和docker-compose之后,拉取mysql:8.0.16版本镜像后,通过下列语句启动

docker run --name mysql8 -p 3306:3306 -e MYSQL_ROOT_PASSWORD=密码 -d mysql:8.0.16 
--lower-case-table-names=1 
--character-set-server=utf8mb4   
--innodb_buffer_pool_size=5G 
--transaction_isolation='read-committed'  
--tmp_table_size=600M 
--log-bin-trust-function-creators=1 
--default-time-zone='+08:00' 
--group_concat_max_len=102400

或者通过docker-compose文件启动

services:
  mysql8:
    image: mysql:8.0.16 
    container_name: mysql8
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=你的密码
    ports:
      - '3306:3306'
    volumes:
      - /root/mysql/mysql-custom.cnf:/etc/mysql/conf.d/mysql-custom.cnf  
      - /root/mysql/data:/var/lib/mysql
    networks:  
      - data_net
 
networks:  
  data_net:  
    external: true

mysql-custom.cnf文件配置数据库的启动参数

[mysqld]
lower-case-table-names = 1
character-set-server = utf8mb4
innodb_buffer_pool_size = 5G
transaction_isolation = 'read-committed'
tmp_table_size = 600M
log-bin-trust-function-creators = 1
default-time-zone = '+08:00'
group_concat_max_len = 102400

 完成上述工作后,就可以正式开发功能了。

标签:vue,--,vue3,netcore8,asp,mysql,3306,docker,安装
From: https://www.cnblogs.com/lx-bk/p/18398877

相关文章

  • asp.netcore8 + vue3 + mysql 自用记账项目(三)功能开发
    一、前端前端使用vue3+vant4组件实现页面功能。 1、创建vue3项目各个操作分别是:选择创建模式?手动创建选择项目模块?Babel,Kouter,Wuex,CSSPreprocessors选择vue版本?3.0是否使用历史路由模式?是样式的写法?Less项目配置放在哪?package.json文件里是否保存本次......
  • asp.netcore8 + vue3 + mysql 自用记账项目(一)背景简介
    一、背景18年的时候,用了一年多第三方免费的记账本不用了,两个方面原因,一是随着数据增多,APP用着越来越慢,二是相关数据被用于其他用途的风险很大且广告很烦。所以,后面通过MUI+asp.netcore+sqlserver实现记账web功能,在阿里云1核2G服务器的windows系统上发布了自用的服务,最......
  • vue3 中使用 icon 图标的 3 种方案
    1.element-iconElementPlus提供了一套常用的图标集合。1.1.安装#选择一个你喜欢的包管理器#NPM$npminstall@element-plus/icons-vue#Yarn$yarnadd@element-plus/icons-vue#pnpm$pnpminstall@element-plus/icons-vue#选择一个你喜欢的包管理器1.2.......
  • 使用Vue3.5的onWatcherCleanup封装自动cancel的fetch函数
    前言在欧阳的上一篇这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑,这个新增的API好像和watchAPI回调的第三个参数onCleanup功能好像重复了。今天这篇文章来讲讲新增的onWatcherCleanup函数的使用场景:封装一个自动cancel的fetch函......
  • 使用VSCode搭建UniApp + TS + Vue3 + Vite项目
    uniapp是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、以及各种小程序。深受广大前端开发者的喜爱。uniapp官方也提供了自己的IDE工具HBuilderX,可以快速开发uniapp项目。但是很多前端的同学已经比较习惯使用VSCode去开发项目,为了开发uniapp项目......
  • 学习Vue3的第三天
    Vue3生命周期概念:生命周期钩子是Vue组件在其生命周期内不同阶段触发的函数,允许开发者在这些关键时刻插入自定义逻辑。规律:生命周期整体分为四个阶段,分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后。Vue2生命周期钩子创建阶段beforeCreate:组件实例刚创......
  • vue3 内置特殊元素<slot> 与 插槽 Slots
    vue官网内置特殊元素<slot>插槽Slots<slot><slot>元素是一个插槽出口(slotoutlet),标示了父元素提供的插槽内容(slotcontent)将在哪里被渲染。Vue模板里的<slot>元素会被编译到JavaScript,因此不要与原生<slot>元素进行混淆。<slot>元素可以使用nameat......
  • vue3快速上手和基本特性
    1)vue使用方式1)cdn方式    该方式无需使用包管理工具,只要用script标签引入js文件即可,可以快速使用vue<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script>2)创建vue项目    创建vue项目时需要nodejs环境,安装好nodejs后先为nodejs换一个国......
  • 【卷起来】VUE3.0教程-05-侦听器
    =========各位看官,在开始学习之前,请帮我点个关注和赞吧========== ......
  • 工作日志:从零搭建vue3+ts+sass项目(3)
    折腾了两天后,发现elementPlus的代码都是ts的,本来不想现在用ts,因为非常不熟悉,但长痛不如短痛,重开项目!直接vue3+vite+ts+sass!让暴风雨来得更猛烈一下吧!我差那几个bug吗?1、执行命令如下:npmcreatevite@latestnpminstallnpminstallsass-Dnpmivue-router2、在src下......