# vue2-webpack5-vuex3-router3-mockjs

**Repository Path**: ldoll/vue2-webpack5-vuex3-router3-mockjs

## Basic Information

- **Project Name**: vue2-webpack5-vuex3-router3-mockjs
- **Description**: vue2-webpack5-vuex3-router3-mockjs
手动编写基础模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-14
- **Last Updated**: 2022-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, webpack, Vue-admin

## README

2022.6.7 手动搭建vue基础框架Vue2-webpack5  

vue2-webpack5-vuex3-vueRouter3-mockjs  


npm init -y  
cnpm i vue@2 -S  
cnpm i webpack webpack-cli webpack-dev-server -D  
cnpm i html-webpack-plugin -D // 解析html  
cnpm i clean-webpack-plugin -D // 每次大包清理文件  
cnpm i postcss-loader autoprefixer -D // 自动增加前缀  
cnpm i mini-css-extract-plugin -D // css大包到单独的文件  
cnpm i css-minimizer-webpack-plugin -D //大包压缩css  
cnpm i webpack-merge -D //合并配置  
cnpm i friendly-errors-webpack-plugin -D //错误提示  
cnpm i vue-loader@15 vue-template-compiler -D  
cnpm i sass sass-loader css-loader style-loader -D // css解析  
cnpm i babel-loader @babel/preset-env @babel/core -D //babel相关东西  

 # vuex@3使用
 cnpm i vuex@3 -S  
 cnpm i lodash -S  
 cnpm i vue-router@3 -S  

|  文件  |  作用  |  备注  |
| ----- | ------| ----|
| views/Vuex3 | | 路由文件 |
| store/index | 引用store | npm需要安装vuex
| store/modules/user | 一般写法
| store/modules/userManage  |  常量写法 | 引入lodash(非必要，用里面的set方法给对象or数组赋值)
| store/mutations-types  | 常量文件
| ./main.js |引入store | |

# mockjs使用
cnpm i qs -S
cnpm i mockjs -D  
cnpm i express -S  
cnpm i nodemon -S  
cnpm i axios -S

|  文件  |  作用  |  备注  |
| ----- | ------| ----|
| views/Mock | | 路由文件 |
| ./MockServer.js | axios服务文件 | 需要安装axios(请求接口)
| utils/http.js | axios相关配置 |
| ./main.js |引入'utils/http.js'| |
| package.json | 启动node服务需要 | npm安装express(启动服务) 和nodemon(支持热更新)

# 前端log日志
- ./log.js 日志方法文件  
- ./log/ 日志记录文件  
- ./MockServer.js 日志调用文件  

# npm同时启动多个服务
cnpm i npm-run-all -D  

- 配置package.json的runall命令  
- npm-run-all 支持串行和并行运行命令， concurrently只能并行运行命令  
- run-p 并行运行 run-s 串行运行  

# husky lint-staged代码提交格式化
cnpm i husky lint-staged eslint -D  //代码规范检测  
cnpm init @eslint/config  
cnpm i eslint-plugin-vue@latest -D 

# 发布网站
cnpm install -g vercel  

- npm run build  
安装完成后，进入 public 目录，通过 vercel 命令发布网站：  
- cd public  
vercel deploy --name vue_svelte  

# element
cnpm i element-ui -S  
main.js 引入  
# Echarts 
cnpm i echarts -S  

# sass-resources-loader 全局scss文件 全局组件
cnpm i sass-resources-loader -D  
vue文件写lang='scss'，全局引入的必须是scss,不然报奇怪的错误  
全局scss在webpack里面配置  
全局组件在main.js引入