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

一、规范目的:

 

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

 

二、开发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

 

~~ 欢迎同时关注我的新浪博客 :  小青蛙博客

    原文作者:我的小英短
    原文地址: https://blog.csdn.net/WU5229485/article/details/82817250
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞