前端团队开发思考

985 阅读2分钟

一、质量如何提升?

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

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

VSCode中需要额外安装Editor插件才能生效。

3. 代码风格统一

(1)配置Prettier

  • 目的:

统一JS、JSX代码风格。

  • 用法:

《Prettier配置指南》

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

后续使用无需在vue原型挂载。

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