前端团队开发思考

一、质量如何提升？

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代码一致性并避免低级错误。

• 用法：

《ESLint配置指南》

（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

以上代码的作用即在所有文件类型中，保证编码方式、缩进格式等风格的一致性。

3. 代码风格统一

（1）配置Preitter

• 目的：

统一JS、JSX代码风格。

• 用法：

《Preitter配置指南》

（2）配置stylelint

• 目的：

统一CSS代码风格。

• 用法：

《Stylelint配置指南》

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',
    },
  },

5. 项目常用库统一

（1）请求库：axios

（2）UI库：ElmentUI

（3）移动端UI库：vant

（4）时间库：dayjs

（5）pdf处理库：vue-pdf

（6）滚动条美化库：vuescroll

（7）SPA标签页通信库：lsbridge

（8）CSS预处理器：less

二、速度如何提升？

1. 二次封装脚手架

2. 多环境部署优化

3. Git工作流（提交规范+校验修复+自动部署）

4. ElmentUI自定义主题

三、推荐关注点

1. vite

2. storybook