团队开发前端VUE项目代码规范

Posted 2022-03-03 mouseleo

团队开发前端VUE项目代码规范

2018年09月22日 20:18:11 我的小英短 阅读数 1658

 

一、规范目的：

 

统一编码风格，命名规范，注释要求，在团队协作中输出可读性强，易维护，风格一致的代码

 

二、开发SRC目录：

 

1.Vuex目录 （状态树配置）

2.Router目录（路由配置）

3.Pages目录 （放置主路由组件 注意命名规范）

4.Common目录 （放置静态文件）

5.Config目录 （全局配置项，路由拦截，报错信息，等枚举信息）

6.Api目录 （ 相关全局请求调用配置、axios、jsonp ）

7.Base目录 （可复用功能性组件）

8.Basic目录 （可复用样式展示组件）

9.Components目录（基础组件：样式组件等 注意组件分类规范）

10.核心：在每个目录下面留一份TEXT或MARKDOWN文档，annotation.txt/annotation.md，用中文批注好每个组件文件夹的功能及使用，每次在当前目录下新建或更新当前目录时，需要做好批注 （必须）

 

 

 

三、组件文件夹分类：

 

样式组件分类（模态框，面板框）

可复用功能组建分类（表格组件，表单组件）

组件内部文件夹

（1）样式文件stylus 

（2）子组件或者tab组件文件夹childs

（3）静态资源文件夹 resources

（4）组件下目录预览：

 

      |— self-component

         |— resources

         |— childs

         |— stylus

         |— self-component.vue

 

四、静态资源：

 

1.静态高质量图片资源

2.ICON等单个或少个复用性较高的图片

3.复用性较高的JSON本地文件

4.媒体文件

5.分类

6.命名规则

 

五、组件开发：

 

1.可复用组件开发规范

2.样式定义组件开发

3.单文件组件开发规范

4.扩充组件功能注意事项

 

六、路由定义：

 

1.全局路由钩子拦截

2.懒加载中AMD规范require和ES6中的import的选择

3.拦截条件语句筛选

4.路由名称的可读性以及注释

 

七、接口联调：

 

1.统一采用axios方式

2.登陆拦截方式

3.参数传递：配合query string 实现对象到uri的格式化

4.GET请求规范

5.POST请求规范

6.其他类型请求规范

7.避免拼接uri字符串参数情况的产生

8.联调失败，快速定位错误的方法

 

八、VUE模板语句使用规范：

 

1.条件 （v-if , v-else, v-if-else, v-show）合理使用 v-if 及 v-show

2.循环 （v-for、 :key）

3.样式 （:style、:class）

4.事件绑定 （v-on、@）

5.props传递 （加类型判断，不能直接数组接收）

6.其他优化细节（v-text、v-html、v-once）

 

九、VUEX使用规范：

 

 1.单/多状态树目录结构

 2.语法糖和原生this.$store的选择和使用注意

 3.多模块VUEX状态树配置和使用（目前几个项目暂时都只涉及到单状态树）

 4.state、mutations、actions、getters使用规范 (https://wusihe.com/2018/07/17/vuex/)

 5.axios请求和state混用问题解决

 

 

十、组件开发规范：

 

1.组件模板开发

 

（1）尽可能语义化标签，使结构更加信息，如不熟悉H5新标签请查看下面文档

A. http://www.w3school.com.cn/html/html5_new_elements.asp

（2）大段功能模块都需要明确中文注释（要求简短明确）

（3）在代码结构很长的情况下，需要分割线注释批注

（4）模板语法中的逻辑尽可能在filters、computed、methods中处理

（5）Tab缩进，四个空格，层次要求分明

 

2.组件样式开发

 

（1）基本上处于scoped 私有域开发

（2）CSS预处理器选择stylus 

A.原因：强大、方便、流行、混合书写、变量、语言函数等

（3）样式编写方式

A.函数式编写样式 ，在common目录下封装好对应常用的方法，直接传参

（4）风格：横向编写，分号分隔，禁止大括号，背景图片统一相对路径调用

（5）如果不熟悉其函数式编程风格的使用，请阅读下面文档

A.https://stylus.bootcss.com

B.https://www.zhangxinxu.com/jq/stylus

（6）基本调用结构预览：

@import ‘./stylus/self-component.stylus‘

（6）如有其他想法可以更换成Sass或Less预处理器也可以

 

 

3.组件脚本开发

 

（1）scoped私有域下开发

（2）和模板结构处于同一文件开发

（3）生命周期及其默认结构编写顺序和规则

    A.data  ->  props  -> 生命周期函数 ->  computeds  ->  watch -> methods  -> …

    B.props 统一使用对象模式，且设置好props属性默认值和类型  

 

 

十一、注释规范：

 

1.TEMPLATE结构内容注释

（1）大区块之间需要回车换行，且有有单独的中文注释

2.STYLUS注释

（1）每个大区块的样式的需要有单独的中文注释

（2）每个大区块样式之间需要回车换行

（3）在STYLUS自定义函数库文件类似于mixin.styl，则需要对每个语言函数进行单独的批注，或者一些功能类似的语言函数可以根据功能分类注释

3.SCRIPT注释

（1）尽可能多用单行注释，注释需要与被注释的地方对齐

（2）生命周期created()、mounted()下的所有方法调用需要单独注释，methods里面涉及接口调用的方法一定要注释，filters里面的过滤器需要注释说明功能

命名规范：

 

1.组件文件夹命名：

（1）按照功能英文命名，过长则用 ” - ” 连接

（2）其内部的组件名称和样式名称与文件夹同名

（3）其风格与微信小程序组件文件夹命名保持一致

2.静态资源文件夹static命名：

（1）英文命名，过长则用 ” - ” 连接

（2）其主目录需要创建一个解释文件（annotation.txt/annotation.md），在这个解释文件中使用中文批注好每个目录的内容，以及每个目录正在被哪些组件调用

3.图片文件命名：

（1）如果是精灵图，则需按功能命名

（2）如果是列表渲染图片，则需要按照1-100编号命名

（3）如果是ICON图片，则需要添加 ”icon-”前缀

 

 

十二、解释文件：

 

1.定义：一个对当前目录下所有的文件夹的一个解释性文档，中文批注每个文件夹下的组件功能或者资源类型，如果是资源类型文件夹，则还需批注调用该文件夹的组件名称和路径

2.名称：统一命名annotation.txt/annotation.md