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

mockjs使用

cnpm i qs -S cnpm i mockjs -D
cnpm i express -S
cnpm i nodemon -S
cnpm i axios -S

前端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引入