一、规范目的:
统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致的代码
二、开发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
~~ 欢迎同时关注我的新浪博客 : 小青蛙博客