vue代码规范（公司内部使用）

UI框架选择
PC端Vue项目UI框架优先选择：Element UI
文件夹、组件命名规范，组件结构规范
文件夹：
1.文件夹名称应统一格式，小驼峰命名，见名思意，其余文件夹名称统一按照项目结构目录命名规范统一命名。
2.文件路径按照菜单定义。顶级菜单对应一个一级文件夹，依次类推。
⦁ 基础组件：
当项目中需要自定义比较多的基础组件的时候，比如一些button，input，icon，建议以一个统一的单词开头，或者放到通用文件夹统一管理，这样做的目的是为了方便查找。
公共组件应该都放到components文件夹下，单个组件独 立一个文件夹，用来放相对应的vue文件以及页面相关的样式 文件，样式少可直接写到页面组件里边，这样更符合组件化 的思想。组件结构：
组件结构遵循从上往下template，script，style的结构。
⦁ 项目组件：
组件名以单词大写开头，当多个单词拼写成的组件时，采用驼峰式命名规则。一般是多个单词全拼，减少简写的情况，这样增加可读性。
页面级组件应该放到相对应页面文件夹下，比如一些组件只有这个页面用到，其他地方没有用到的，可以直接放到页面文件夹，增加components子文件夹。
组件样式
单个组件样式一般可直接写到组件下style标签下，为了防止样式污染，添加scoped属性或者使用bem（block块，element元素，modifier修饰符）命名的class，bem实体名称全是小写字母或者数字，eg：menu__item–selected，推荐使用bem，也可以通过设置作用域来防止样式污染，写样式的 时候尽量少写元素选择器（比如 div ,p { 样式 }），为了提高代码查找速度，可以用类选择器，标签里行内样式较多的时候，建议使用class抽离出来 。
Template模板文件
1.尽量使用以.vue结束的单文件组件，方便管理，结构清晰。
2.标签语义化，避免清一色的div元素
3.DOM的层级数尽可能少，优化渲染速度。
4.编写业务代码时，尽量查看原型后开发，页面布局样式尽量保持一致。比如列表页面的查询和表格等通用功能。先确认后开发。
5.尽量少使用br标签换行。使用布局flex，grid等（ps：grid布局chrome 57以上才支持），少使用table布局。
6.样式class的命名：统一以小写字母开头，小写字母、下划线和数字组成。命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和第三方库中的命名冲突。例如：xx_left,xx_line。
7.自定义标签：使用自闭标签的写法。例如：，如果自定义标签中间需要传入slot，则写开始标签和结束标签，结束标签必须加/。
8.v-slot：在vue2.6版本中，slot与slot-scope已被弃用，统一使用v-slot指令。
9.相同的卡片布局，首先整合数据，尽量使用循环方式去增加，避免变更多处的问题。
Script
1.在 script 标签中，遵守 Js 的规范和ES6规范。
2.组件名称：必须以大写字母开头驼峰法命名。使用时，用小写英文，单词之间使用 ‘-’分割，eg:
3.Data必须是一个函数。
4.Props定义：提供默认值，使用type属性校验类型，使用props之前先检查prop是否存在
5.全局已经引入的组件，不要重复引用注册到局部。
6.尽量按照Vue钩子调用顺序和推荐顺序书写，components, props,data,computed,watch,created,mounted,activited ,update,methods.
7.调试信息 console.log() debugger使用完及时删除。
8.为v-for设置Key值。(不建议 用index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作)
9.规避v-if和v-for用在一起。或者增加一层
10.使用ES6风格编码源码,定义变量使用let,定义常量使用const,使用export,import模块化。
11.指令缩写：都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)。
12.使用 data 里的变量时请先在 data 里面初始化。
13.函数中统一使用_this=this来解决全局指向问题。
14.使用‘===’和‘!==’。
15.整合数据时尽量使用ES6，Object.assign和 … 扩展符（ps：Object.assign() 为浅复制）
16.页面定义只是用来转化显示的对象时，直接声明到顶部，属于无需监听的数据。
17.校验时，先去校验公共库查找是否有对应校验，有则使用，没有则查看是否要多处使用，如果可复用，则进行抽离。
18.vue项目中尽量减少或避免进行dom操作，全部通过vue数据进行驱动。
Style
1.使用 scoped关键字，约束样式生效的范围。
2.避免使用标签选择器（效率低、损耗性能）。
3.CSS 属性书写顺序：先决定定位宽高显示大小，再做局部细节修饰！推荐顺序：定位属性(或显示属性，display)->宽高属性->边距属性(margin, padding)->字体，背景，颜色等，修饰属性的定义。
注释规范
注意在注释的前后各有一个空格。
HTML注释：
CSS注释：/* comment! /
JS注释：
行级注释（注意//后面空格）：// 正确的注释
变量声明注释：如果是在类似 Vue 项目的 data 属性中的变量，直接用行级样式跟在后面。
例如：rightExample: ‘yes’, // 注释直接写这里
如果是在类，构造函数，或者常量定义中的变量，使用块级注释。/ comment /
函数声明注释：不必要在每一个函数都写注释，但是在公共函数，还是建议补全注释，让后面的人不需要重复造轮子。
复杂的业务逻辑处理说明、特殊情况的代码处理说明，对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明
Vuex中store
1.各个文件的命名根据上面的项目结构命名。
2.应用层级的状态应该集中到单个 store 对象中。
3.提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
4.异步逻辑都应该封装到 action 里面。
5.vuex 的dispatch和commit提交mutation的区别：dispatch=>actions用来触发异步操作，commit=>mutation用来触发同步操作的方法。当操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成，其他使用commit即可。
路由
1.路由至少包含三个选项：path、name、component。path统一小写；name对应于组件中的name，大写开头驼峰；component组件驼峰。名称大写开头的组件
2.路由使用动态路由。
Web字体规范
1.现在统一字体为宋体，在全局样式文件base.css声明下font-family:“SimSun”,“宋体”， 如果遇到组件中设置字体的，直接增加组件样式文件，如element-ui.css在这里修改elementUI组件样式问题。
组件化及代码复用
1.当有多处使用相同代码逻辑时，应该将代码逻辑进行抽离，进行代码复用，包括不限于vue mixins、vue components、filters、自定义指令、js函数、sass样式等，且抽离的公共部分尽量不要包含业务逻辑，以保证最大限度的复用性。
CSS初始化规范
base.css增加初始样式。
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:“SimSun”,“宋体”;}
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
ol,ul,li { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%;vertical-align:middle; }
table { border-collapse:collapse; border-spacing:0; }
p{word-wrap:break-word}
/ 清除浮动 */
.clearfix:after {content: “.”; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }