一、质量如何提升?
1. 目录结构划分
├─apis // 请求文件
│ ├─request.js // 请求基础封装
│ └─modules // 各模块请求
│ └─user.js
│
├─assets // 静态资源
│ ├─img // 图片
│ │ └─message.png
│ └─json // json
│ │ └─map.json
│ └─style // less/sccc文件
│ └─user // 业务模块
│ └─user.less
│
├─components // 组件
│ ├─base // 基础/布局组件
│ │ ├─BaseButtom.vue
│ │ └─BaseNavbar.vue
│ └─custom // 业务组件
│ └─user // 业务模块
│ └─UserTable.vue
│
├─config // 全局配置
│ └─index.js // 路由基础封装
│
├─mixins // 混入
│ └─user.js // 对应业务模块的mixin
│
├─routers // 路由
│ ├─index.js // 路由基础封装
│ └─router.js // 若router繁杂,可单独提入此文件
│
├─store // 状态
│ ├─index.js // 基础状态
│ └─modules // 各模块状态
│ └─user.js
├─utils // 工具函数
│ └─validate.js
│
├─views // 页面结构
│ └─user // 业务模块
│ └─user-table.vue
│
├─App.vue // 如非必要,不要在此文件写入样式
└─main.js
2. 开发规范统一
(1)配置ESlint
- 目的:
保证JS代码一致性并避免低级错误。
- 用法:
(2)配置Editorconfig
- 目的:
保证JS代码在不同编辑器或IDE下的格式一致性。
- 用法:
在项目根目录创建.editorconfig
文件,其中写入以下内容:
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
以上代码的作用即在所有文件类型中,保证编码方式、缩进格式等风格的一致性。
VSCode中需要额外安装Editor插件才能生效。
3. 代码风格统一
(1)配置Prettier
- 目的:
统一JS、JSX代码风格。
- 用法:
(2)配置stylelint
- 目的:
统一CSS代码风格。
- 用法:
4. 项目打包优化(针对生产环境)
(1)去除sourceMap
在vue.config.js
中配置:
productionSourceMap: false, //生产环境关闭sourceMap
(2)引用js文件使用min版本
(3)去除console输出
a. 开发环境中安装babel-plugin-transform-remove-console
插件;
b. 配置babel.config.js
:
//项目发布阶段需要用到的babel插件
const proPlugins = [];
//获取当前的-mode是开发阶段还是发布阶段
if(process.env.NODE_ENV === 'production'){
//打包后屏蔽控制台输出
proPlugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
//发布产品时候的插件数组
plugins:[
...proPlugins
]
}
(4)引入CDN
a. index.html
中引入CDN资源;
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js" crossorigin="anonymous"></script>
b. vue.config.js
中配置打包时排除CDN资源:
configureWebpack: {
externals: {
echarts: 'echarts',
},
},
后续使用无需在vue原型挂载。