一次项目的前端代码规范

标签：条件   路由   配色   bpa   too   switch   必须   资源   miss   

一：文件目录含义：

 -src

|__assets         #静态资源 如自定义字体、图片、公共css

|__common   #公共样式文件路径

|__theme     #主题配色

      |__mixin     #混入函数

      |__variable   #scss常用变量

     |__components

            |__base    #基础公共组件

|__libs            #常用工具函数，配置文件等

            |__urls        接口请求路径配置

     |__mock          #开发时使用的 mock 数据及方法

|__plugins        #项目插件 如axios, element-ui

|__router         #路由文件

|__store          #状态管理中心

     |__types          #ts的类型定义文件 index.d.ts

     |__views

          |__common    #项目公共组件 如 Error.vue, Login.vue

          |__home      #项目首页(如有)

二：配置文件：

- **.browserslistrc **   浏览器兼容性配置文件

- **.editorconfig **     编辑器格式配置文件

- **.eslintrc.js**        eslint代码检查配置文件

- **.prettierrc**        prettier格式化配置文件

- **.stylelintrc.json**    CSS格式配置文件

- **babel.config.js **     babel配置文件

- **postcss.config.js**    postcss编译配置文件

- **tsconfig.json**      当前项目ts配置文件

- **tslint.json**         ts格式化检查配置文件

- ** vue.config.js**   webpack配置文件，配置跨域、文件解析、优化打包等

- ** package.json**   包管理文件，配置启动脚本

三：编码规范：

JavaScript部分：

1. 系统菜单在菜单管理中定义，根据菜单名称、路径判断权限。页面上按钮（如新增、修改）的权限由actionCode控制，在菜单页面中配置。template中使用自定义指令v-permission判断。

2. 所有接口请求后回复的数据有二次封装。是否调用成功已在axios里完成判断，接口请求后可直接使用 .then（成功回调） .catch（失败回调） .finally（可选），无需再次判断接口是否调用成功。

3. 命名方法：变量和函数名小驼峰，html标签使用烤串命名法（如v-header），构造函数以大写字母开头。

4. 不要定义未使用的变量。

5. `switch` 一定要使用 `break` 来将条件分支正常中断，一定要有 `default` 默认情况处理语句。

6. 取对象属性或数组内容前需先判断是否为对象或数组，避免报错导致代码异常。

7. 始终使用`===` 替代 `==`。

8. 函数中异常先行，先处理异常情况。异常处理中的错误必须处理。

9. 不要使用 `undefined` 来初始化变量，可使用null或空字符串等。

10. 如果可以，尽量使用 || 、&&、三元 表达式，如 `fn && fn()` 。

11. 不要扩展js中的原生对象。

12. 避免不必要的布尔转换，如!!result。

Vue部分：

1. 组件名大驼峰，如AppMenu.vue。
2. 导出的组件名称，尽量与文件名或文件路径一致，方便在vue-Devtools查找。
3. props中每个对象需要定义类型、需要有默认值，如@Prop({ type: Array, default: () => [] })。
4. 接口调用尽量在vuex 的 actions 中调用，进行数据-视图分类，集中管理数据。
5. 每个methods方法尽量都添加注释，逻辑判断复杂的地方多加注释，方便维护。
6. 组件script中，引入数据时，尽量保持顺序为Props、Vuex、Data、Computed、Watch、生命周期钩子、Methods。

CSS部分：

1. class采用烤串命名法，如.app-menu。
2. 除非特殊情况，不使用标签选择器。
3. 除非特殊情况，不使用行间样式。
4. 不使用scoped，Vue文件内如需添加样式必须有唯一外层class，与组件名一致。
5. assets的scss中的theme.scss定义了一些主题色、系统颜色、文字颜色、边框等，组件中尽量直接引用，减少自定义如$--color-primary、$--border。
6. 公用的样式尽量提取到外层引用，减少代码重复。

一次项目的前端代码规范

标签：条件   路由   配色   bpa   too   switch   必须   资源   miss   

原文地址：https://www.cnblogs.com/xianxiang886/p/12118511.html