vue项目开发的通用代码规范

一、开发环境篇#

我们首先推荐vs code作为开发环境，因为其友好的开发界面和强大的扩展库是我们快速的进行代码开发的必要支撑。 在vs code中开发vue项目，有一些插件是必要装的，结合我个人的一些经验，以下插件和配置推荐给大家：

1.Vetur

​ vue开发必装的一款插件，帮你规范vue的语法、高亮代码等众多功能。

2.Eslint

​ vue代码规范检查，可以自定义规则，在编译代码时自动检查语法，报出提醒。

3.Prettier

​ 代码格式化插件，安装后，请在首选项>设置中打开format on save的选项，在每次保存代码时自动格式化代码。如果无效，请用Alt+Shift+F，这时应该会在最底部有一个消息显示目前格式化的插件有冲突，让你选择其中一个，选完就正常可以用了。

4.Bracket Pair Colorizer 2

​ 一个可以将代码块括号，如{} [] ()等进行同颜色标注的插件，帮你快速找到下一个括号。

5.Git History

​ 如果你司用git来管理代码的话，这个插件推荐安装，他扩展了“源代码管理”面板中的git功能，可以查看git树和快速提交代码。

6.GitLens

​ git环境再加这一个gitlens就更牛x了，可以快速查看每一行代码的版本信息，谁用谁爽。

二、项目目录篇#

vue-cli的目录相信大家已经十分熟悉，我司结合自身的项目的需要和参考了vue-cli的目录结构，固定了以下的更合理的目录结构：

Copy Highlighter-hljs
├── babel.config.js                 相关配置及规范见官网 https://cli.vuejs.org/zh/config/#babel
 
├── dist                           生成打包后文件
 
├── node_modules                   安装的依赖包
 
├── package-lock.json              npm包配置文件、依赖包小版本信息
 
├── package.json                   npm包配置文件、依赖包信息
 
├── public                         public中的表态资源会被复制到输出目录(dist)中
 
├── src
 
│   ├── App.vue                     路由组件的顶层路由
 
│   ├── assets                      放置一些静态资源，例如图片，图标，字体
 
│   ├── components                  公共组件
 
│   ├── main.js                     Vue 入口文件
 
│   ├── router                      vue-router 相关配置
 
│   ├── store                       vuex 相关配置
 
│   │       ├── actions.js         全局vuex actions 方法
 
│   │       ├── mutations.js       全局vuex mutations方法
 
│   │      └── index.js            导出vuex所有配置
 
│   ├── tools                      自定义的工具类
 
│   └── views                      所有的路由组件
 
└── vue.config.js                  相关配置及规范见官网 https://cli.vuejs.org/zh/config/#vue-config-js

三、组件篇#

1.组件开发需要全面的收集需求，深刻分析此组件可以覆盖的业务范围，并作出正确的取舍。

2.一个组件不可能是大而全的，但可以是层层扩展的，从一个基础组件，一层层的扩展成更复杂的组件，甚至超大型的组件。

3.组件的props、method、events需要遵守同样的命名规范，如获取值用getXXX,设置值用setXXX，创建用createXXX等，这些可以快速的帮助使用者找到需要的接口。

4.组件需要添加name，在设置keep-alive时需要用到。

5.组件头部应该添加组件的说明注释，如接收的传入参数、向外层抛出的事件名等。

6.props定义应该尽量详细，包括type、default、required、甚至validator

7.样式应该设置scoped，避免污染全局样式。

四、命名规范篇#

1.css命名规范#

​ 1.css class命名尽量使用英语，不要使用汉拼，并且有意义，

​ 2.使用单词命名时不要缩写，除非非常有名的单词。

​ 3.- 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _ 例如（header-list）

​ 4.不允许通过1、2、3等序号进行命名

​ 5.避免class与id重名

​ css编写顺序

​ 1.位置，定位，层级（position，top，bottom，left，right，z-index，display，float）

​ 2.大小（width，height，padding，margin）

​ 3.文字系列（font, line-height, letter-spacing, color- text-align）

​ 4.背景（background，border）

​ 5.其他（animation，transition）

2.javascript规范（基于ES6 结合eslint 强制编码格式）#

1.变量命名采用小驼峰命名法---即首字母小写，后每个单词首字母大写

2.常量命名采用全字母大写命名，以便于与变量区分

​ 常量 const PI = 3.141592653 变量 let name = ''

3.函数命名使用小驼峰命名法，条件允许情况下请采用动词前缀方式，请保证函数命名语义化明确

4.构造函数命名必须采用大驼峰命名法，即首字母必须大写

5.单行注释

Copy Highlighter-hljs
// 这是名称
let name = 'wsl'

6.多行注释

Copy Highlighter-hljs
/**
* 这是名称 
* 缩写
*/
let name = 'wsl'

7.函数注释

​ 函数注释也是多行注释的一种，但要求提供函数功能说明，作者信息，参数说明(若有参数)，以及返回值(若有 返回值)说明

Copy Highlighter-hljs
/**
* @desc 用于计算两数之和
* @author wsl
* @param {Number} x 数字，用于加法计算
* @param {Number} y 数字，用于加法计算
* @return {Number} result 用于保存计算后的结果
*/
function add(x, y) {
	
	let result = x + y;
	return result;
 
 };

8.推荐使用对象直接创建对象，而非构造器创建

9.字符串拼接推荐使用ES6中``拼接

10.判断

​ 比较运算符,推荐使用 '=' 与 '!'

​ if 推荐不要简写，判断 非空时 “!变量”需要考虑变量不为数值0

11.循环

​ 若循环中需使用函数，请将函数定义在循环外部而非内部，这样可以避免函数的反复创建

3.组件命名规范#

1.组件名应该始终是多个单词组合的，一些vue内置组件除外，如App、component、transition等。

2.相关联组件的命名最好是有共同部分的，如TodoList.vue,TodoItem.vue

Copy Highlighter-hljs
components/
|- TodoList.vue
|- TodoItem.vue

3.组件的文件名要么是始终单词大写开头，要么始终横线连接

Copy Highlighter-hljs
components/ 
|- MyComponent.vue

Copy Highlighter-hljs
components/ 
|- my-component.vue 

4.特定和基础组件，应该以一个特定的前缀开头，比如Base、App等

Copy Highlighter-hljs
components/ 
|- BaseButton.vue 
|- BaseTable.vue 
|- BaseIcon.vue components/ 
|- AppButton.vue 
|- AppTable.vue 
|- AppIcon.vue 

5.组件的命名应该使用完整单词，而不是缩写

Copy Highlighter-hljs
 //反例 
 components/ 
 |- BtnAdd.vue 
 |- UName.vue 
 
 //推荐 
 components/ 
 |- ButtonAdd.vue 
 |- UserName.vue  

四、常用变量限制及验证#

​ 1.名称字数限制 （推荐1-20）

​ 2.手机号，电话，邮箱验证（通用验证）

​ 3. 上传附件

​ 图片：若无特殊要求，格式限制jpg、png、jpeg、gif ，大小限制 5M以下

​ 视频：若无特殊要求，格式限制mp4、MPEG4

五、页面显示及功能交互通用#

​ 1.文字超出容器需要进行 '...' 省略

​ 2.图片显示 无特殊要求时，按原图宽高比显示

​ 3.美化滚动条

​ 4.涉及数据处理功能按钮，增加防频繁点击处理

六、使用开发环境及相关附属第三方（PC端）#

​ 1.vuecli3.0以上 vue 全家桶 文档：https://cli.vuejs.org/zh/guide/

​ 2.element-ui UI 文档：https://element.eleme.cn/#/zh-CN

​ 3.axios 请求 文档：http://www.axios-js.com/zh-cn/docs/index.html

​ 4.vue-quill-editor 富文本，无特殊要求时 文档：https://github.surmon.me/vue-quill-editor/

​ 5.echarts 统计图表 文档：https://echarts.apache.org/zh/index.html

​ 6.vue-amap 地图 （高德）无特殊要求时 文档：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

七、基于RBAC权限#

​ 1.根据角色动态获取菜单，数据及功能按钮权限

八、服务部署配合#

​ 1.动态部署开发，生产环境 (前后端分离)

​ 生产环境：nginx

​ 开发环境：vue.config.js 设置本地代理

​ 2. 动态部署开发，生产环境 （不分离）

​ public下index.html 以缓存方式设置配置项

九、其他#

1.v-for需要设置key值，但不建议用index作为key

2.v-for不要和v-if一起使用。如果一定要用v-if, 则在外层用包一层,在元素上再使用v-if。