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; }

Vue代码规范（大部分适用）相关推荐

前端代码规范，vue 代码规范
一.规范目的对于一个团队来说,制定统一的规范是有必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码的工作效率,使代码保持统一的代码风格,以便于代码整合和后期维护. 二.HTML/CS ...
前端代码规范(es6,eslint,vue)
2019独角兽企业重金招聘Python工程师标准>>> 前端开发规范一.HTML 1.语义化标签 HTML5 提供了很多语义化元素,更好地帮助描述内容.希望你能从这些丰富的标签库中 ...
Vue 脚手架中的.eslintrc.js代码规范的解决
在我们使用Vue脚手架创建项目时尤其是团队共同开发项目时会按照一个共同的代码规范来编程创建Vue脚手架中有一个.eslintrc.js格式但是在编程中我们通常会使用 shift+alt+f ...
前端代码规范文档（Vue、es6、ts、部分js）
Vue 开发规范目录及说明规范目的命名规范结构化规范注释规范编码规范 CSS 规范规范目的为提高团队协作效率,便于后台人员添加功能及前端后期项目有何迭代,以及提高自身代码质量,让大家书写 ...
前端代码规范（阿里） --- Vue
一.Vie编码基础 vue项目规范以 Vue 官方规范(https://cn.vuejs.org/v2/style-guide/)中的A规范为基础 (一) 组件规范 1.组件名为多个单词组件名应该始 ...
Vue 前端代码风格指南、代码规范
目录一.命名规范 1.1 项目文件命名 1.2 Vue 组件命名 1.3 代码参数命名二.代码规范 2.1 Vue 主要针对vue2.x 2.2 HTML 2.3 CSS 2.4 JavaSc ...
转型实践｜2022前端代码规范（大部分适用）
面试时你写的代码杂乱无章,被技术挑剔而压工资时.别人早就用整洁的代码进入了大厂,越是好的公司对于代码规范也更为严格.再此把前端代码代码规范做了一下整理.话不多说看看吧. HTML规范 1.起止标签所 ...
Vue eslint 团队代码规范
原文:nice.lovejade.cn/zh/article/- Prettier 是一个有见识的代码格式化工具.它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要 ...
vue 组件名下划线_团队Vue组件规范
在现有规则基础上,统一团队使用的Vue组件代码规范. 代码风格变化的点: 强制组件选项顺序,不允许自己随意调整. 目前关闭了v-html的报错. 大部分新增规则都是warning,不影响构建. 一些 ...

Vue代码规范（大部分适用）

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

Vue代码规范（大部分适用）相关推荐

最新文章

热门文章