前端规范 - 前端项目开发规范

0 前言

好好做业务，提高自己的工程能力

[强制] 1 开启eslint

根据团队的习惯，制定适合自己的rules
比如 no-console no-debugger可以关闭

[强制] 2 新项目使用typescript

老项目不做要求，新项目必须使用
同时避免用成anyScript，那样就毫无意义

[推荐] 3 目录结构

src

api 项目统一接口管理

assets

components 项目全局组件

http 项目统一请求

router

store

styles

utils

views 业务界面文件

4 统一管理原则

[强制] 4.1 接口地址统一管理

无需封装一堆请求方法，直接通过统一json方式管理
便于统一管理、修改、升级

...
// 公共模块
common: {
  ...
},
// xxx模块
xxx: {
  getList: '/xxx/getList', // 获取xxxlist
},
...

统一导出挂载在Vue原型链上，便于项目中直接访问，如 this.$URL.xxx.getList

[强制] 4.2 axios请求全局统一

便于封装请求，以及拦截返回结果
并且挂载在Vue原型链上，便于项目中直接访问，this.$http.get(this.$URL.xxx.getList).then(...

[强制] 4.3 公共方法统一管理

工具类文件，统一放置在src/utils/下

[强制] 4.4 环境变量统一管理

uat、pre、prod不同环境的变量参数，统一收纳配置，避免各自为政

[推荐] 4.5 公共组件 vs 业务私有组件

项目公用组件，放置在src/components下面
业务单独使用的组件，放置在业务文件夹下的components文件夹中

[推荐] 5 api、routes、store分模块管理

在大型的项目中，建议api、routes、store按模块拆分管理，方便解耦

[强制][红线] 6 禁止引用第三方CDN

以cdn.jsdelivr.net为例，去年出现过访问不通的情况，而且平常的访问速度也不能够保证
即使平常比较稳定，但只要出现一次事故，就是大P0级别的事故

7 禁止使用不安全的外部依赖

[强制][红线] 7.1 禁止使用未开源的类库

容易侵权，经典的 highCharts

[强制] 7.2 禁止使用没人维护的类库

不管是公司内外的项目，经典的 weex

[推荐] 7.3 尽量不使用未知名的小众依赖

性能、可持续性没有保证

[推荐] 8 IE浏览器拦截

由于IE浏览器的诸多问题，连微软自己都放弃了，对于PC端系统，建议放弃支持
IE浏览器访问的时候，直接在系统最前面进行拦截，302到 提示浏览器升级 界面

[推荐] 9 最常用类库通过公司cdn引入

比如最常见的 axios.min.js vue.min.js vuex.min.js vue-router.min.js element.js等依赖，通过webpack externals，直接通过cdn引用

• 避免打包时间慢
• 避免打出包过大
• 公司级别的应用统一这些基础请求，会更早的利用到浏览器的缓存

[推荐] 10 图片放置到oss

便于利用oss的cdn能力、缓存特点、以及url上追加相关参数的升级功能

[推荐] 11 对项目中的配置做到完全了解

• 对package.json里面的配置文件完全知晓
• 对目录结构了解
• 对核心的业务模块分布了解

欢迎查阅本专栏其余前端相关规范

• html css js 三驾马车 3篇
  前端规范 - html规范
  前端规范 - css规范
  前端规范 - js开发规范

• 开发框架类 1篇
  前端规范 - vue开发规范

• 开发实践类 5篇
  前端规范 - git使用规范
  前端规范 - 前端注释规范
  前端规范 - 前端广义安全规范
  前端规范 - 前后端接口规范
  前端规范 - 前端项目开发规范