脚手架描述
对vue-cli版本为v3.6的脚手架进行了二次封装，适用于全布PC端项目
项目注意项
1. 新增的第三方的库或者插件，可配置到webpack.dll.config.js和vue.config.js，把它们抽离出来，应先执行npm run dll抽离出第三方库（为了减少打包时间和js文件过大）
2. 模式是Vue CLI项目中一个重要的概念。相关文档：https://cli.vuejs.org/zh/guide/mode-and-env.html
3. 该脚手架奉行『约定优于配置』相关功能的代码应该放在相关的文件夹下，这种方式可以减少开发人员的学习成本和沟通成本，例如，mixins相关的逻辑应该放在mixins文件夹下，mock的数据文件应该放在mock文件夹下。具体思路可以参考Egg.js的设计原则：https://eggjs.org/zh-cn/intro/index.html
4. assets文件夹用于存放需要被webpack处理的静态文件（包括了CSS、JS、图片等等）
5. public文件夹下的文件并不会被Webpack处理：它们会直接被复制到最终的打包目录（文件名需指定）下。必须使用绝对路径引用这些文件。
6. views文件夹下的layout文件夹下，存放了所有项目都会用到的页面组件，例如登录页、路由错误跳转页、项目主题风格页。
7. 开始项目的时候，demo命名的文件夹或者文件都可以删掉，当前的demo相关逻辑都是为了举例说明。
开发注意项
| 问题区域 | 解决办法 |
|---|---|
| 左侧查询表格 | 输入栏的字体需要调整为12号 |
| 左侧查询表格 | placeholder去掉 |
| 所有表单 | 必填项需要标红 |
| 增行、删除按钮 | 12px |
常用命令
# 下载框架依赖npm install# 运行开发环境npm run serve# 抽离第三方库或框架npm run dll# 打包开发环境所需要的代码npm run dev# 打包测试环境所需要的代码npm run test# 打包正式环境所需要的代码npm run build
项目布局
|-- vue
|-- .env.development // 存放development模式下特有的环境变量
|-- .env.production // 存放production模式下特有的环境变量
|-- .env.test // 存放test模式下特有的环境变量
|-- vue.config.js // 打包配置文件
|-- public // 该文件夹下的文件并不会被Webpack处理，它们会直接被复制到最终的打包目录下，必须使用绝对路径引用这些文件
| |-- favicon.ico // 图标
| |-- index.html // 入口html文件
| |-- static // 存放项目中不需要被webpack打包的文件
|-- src // 源码目录
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
| |-- assets // assets目录中的文件会被webpack处理解析为模块依赖，只支持相对路径形式
| | |-- css // 存放需要打包编译的样式文件
| | | |-- common.css // 公共样式
| | | |-- reset-element-ui.less // element-ui重置样式
| | | |-- theme // element-ui相关样式
| | |-- img // 存放图片文件
| |-- components // 项目通用组件文件夹
| | |-- index.js // 所有通过组件都全局注册，命名以qb开头
| |-- config // 项目配置文件夹
| | |-- env.js // 配置编译环境和线上环境之间的切换
| | |-- fetch.js // 数据请求通用接口封装
| |-- dictionary // 静态数据字典
| |-- filters // 存放filters文件
| | |-- index.js
| |-- mixins // 存放mixins文件
| |-- mock // 存放mock数据文件
| |-- router // 存放mixins文件
| | |-- index.js
| |-- service // 请求接口封装函数
| | |-- uac.js // UAC常用请求接口封装函数
| |-- store // 存放vuex相关逻辑的文件夹
| |-- utils // 通用工具函数存放文件夹
| | |-- index.js
| | |-- storage.js
| |-- views // 以页面为单位的组件存放文件夹
|-- tests // 单元测试
新增功能
1. 二次封装了axios，用于配置请求的通用项，统一处理错误请求，配置token等等（config文件夹下的fetch.js）
2. 新增vue.config.js文件，引入常用开发配置
3. 新增webpack.dll.config文件，用于抽离第三方的插件或者库，便于快速打包代码
4. 新增utils文件夹，用于存放常用的工具函数
5. 新增service文件夹，用于存放请求相关的代码
6. 新增mock文件夹，用于存放mock的数据
7. 新增config文件夹下的env.js，用于配置编译环境和线上环境之间的切换
8. 在development、test、production模式下，新增VUE_APP_MODE变量，分别对应development、test、production
9. 新增mixins文件夹，用于存放mixins相关JS逻辑
10. 新增filters文件夹，用于存放filters相关JS逻辑
11. 新增router文件夹，用于存放路由相关JS逻辑
12. 新增dictionary文件夹，用于存放静态的数据字典
引入的框架、库或通用代码
1. 引入了common.css（rest.css和base.css的合并）
2. 引入了utils.js、cookie.js等，常用的工具函数
3. 引入了axios.js，用于解决请求数据
4. 引入了mock.js，用于后端接口数据模拟
其他系统使用步骤
1. qbnpm install qb-admin -S
2. import QBADMIN from 'qb-admin/src/pageComponents';
3. Vue.use(QBADMIN);