vue3.0 + net6 webapi+ mysql

全栈开发：

-------------------------快速创建项目--------------------------------- 

1. npm init vite@latest 1024tool.ui
vue
ts
npm install
npm run dev ==pnpn dev

2.npm install -g pnpm

3.pnpm install sass --save

4.pnpm install element-plus --save
https://element-plus.gitee.io/zh-CN/

5.pnpm install vue-router@next --save

6.pnpm install axios --save

 7. pnpm install vuex@next --save 

---------------------------------------------------------------------------

https://github.com/vuejs/create-vue

1. npm create vue@3
2. pnpm -v
3. pnpm i
4. pnpm dev

 

开发环境和技术栈
操作系统：windows

开发工具：vscode、Visual Studio 、sql server

​ 前端：Vue3、TypeScript、SCSS、Element Plus、Router、axios、Vuex

​ 后端：.NET6、Automapper、Autofac、Sql sugar、JWT、Log4Net

前端开发--后端提供数据--数据库管理数据--业务流程实现

 

01.nodejs 安装
通过node --version看版本号表示安装好了
http://nodejs.cn/download/

02.脚手架工具安装Vue-CLI
安装命令，通过vue --version看版本号表示安装好了
npm install -g @vue/cli

03.通过命令创建项目
vue create xin-ui

04.安装TypeScript
https://www.tslang.cn/docs/home.html
安装命令 vue add typescript

05.安装SCSS
安装命令
npm install sass-loader node-sass --save

06.安装Element Plus
安装命令，https://element-plus.gitee.io/zh-CN
npm install element-plus --save
项目中导入
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
07.文件名已2个单词组成为好

08.路由的配置和使用
页面和url地址的跳转适配
安装命令
npm install vue-router@next --save
项目中导入
import router from './routes'
app.use(store)

09.数axios的使用，读取JSON据
安装命令
npm install axios --save

import { createStore } from 'vuex'

const store = createStore({

  state() {

    return {

      IsShowLogin: false,

      IsShowRegister: false,

      NickName: localStorage["NickName"]//昵称，登录成功后赋值

    }

  },

  mutations: {

    OpenLogin(state) {

      state.IsShowLogin = true;

    },

    CloseLogin(state) {

      state.IsShowLogin = false;

    },

    OpenRegister(state) {

      state.IsShowRegister = true;

    },

    CloseRegister(state) {

      state.IsShowRegister = false;

    },

    SettingNickName(state, NickName) {

      state.NickName = NickName;

    }

  }

})

export default store;