Vue前端书写规范大全(非常详细!)

命名规范

s：表示字符串。例如：sName，sHtml;
n：表示数字。例如：nPage，nTotal;
b：表示逻辑。例如：bChecked，bHasLogin;
a：表示数组。例如：aList，aGroup;
r：表示正则表达式。例如：rDomain，rEmail;
f：表示函数。例如：fGetHtml，fInit;
o：表示以上未涉及到的其他对象，例如：oButton，oDate;

1：作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。

2：循环变量可以简写，比如：i，j，k等。

标准变量采用驼峰式命名

ID在变量名中全大写

URL在变量名中全大写

Android在变量名中大写第一个字母

iOS在变量名中小写第一个，大写后两个字母

常量全大写，用下划线连接

构造函数，大写第一个字母

var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
    this.name = name;
}

指令规范：

1.为v-for设置Key值。(不建议 用index 作为 key，和没写基本上没区别，因为不管你数组的顺序怎么颠倒，index 都是 0, 1, 2 这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作)

2.规避v-if和v-for用在一起。或者增加一层

3.函数中统一使用_this=this来解决全局指向问题。

4.复用多用v-show少用v-if

路由

1.路由至少包含三个选项：path、name、component。path统一小写；name对应于组件中的name，大写开头驼峰；component组件驼峰。名称大写开头的组件

Template模板文件

1.相同的卡片布局，首先整合数据，尽量使用循环方式去增加，避免变更多处的问题。

2.标签语义化，避免清一色的div元素

3.DOM的层级数尽可能少，优化渲染速度。

4.样式class的命名：统一以小写字母开头，小写字母、下划线和数字组成。命名中尽量避免使用中文拼音，应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和第三方库中的命名冲突。例如：xx_left,xx_line。

5.及时模块化

我们在实际进行组件抽离工作的时候，需要考虑到不要过度的组件化

在决定是否将代码分开时，无论是 Javascript 逻辑还是抽离为新的组件，都需要考虑以下几点：

是否有足够的页面结构/逻辑来保证它？

• 代码重复（或可能重复）？
• 它会减少需要书写的模板吗？
• 性能会收到影响吗？
• 是否会在测试代码的所有部分时遇到问题？
• 是否有一个明确的理由？
• 这些好处是否超过了成本？

css:

1.使用 scoped关键字，约束样式生效的范围。

2.避免使用标签选择器（效率低、损耗性能）。

其它注意事项

变量应该在最小的范围内定义，并尽可能的保持最少的活动时间。

不要在代码中重复使用相同意义的数字，用一个变量代替

对应的方法应该使用对应的动词，例如：get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

校验时，先去校验公共库查找是否有对应校验，有则使用，没有则查看是否要多处使用，如果可复用，则进行抽离。公共函数，还是建议补全注释，让后面的人不需要重复造轮子。复杂的业务逻辑处理说明、特殊情况的代码处理说明，对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明

文件夹小写，vue文件大写

补充：结构化规范

目录文件夹及子文件规范

以下统一管理处均对应相应模块

以下全局文件文件均以 index.js 导出，并在 main.js 中导入

以下临时文件，在使用后，接口已经有了，发版后清除

class="lazy" data-src 源码目录

|-- api 接口，统一管理
|-- assets 静态资源，统一管理
|-- components 公用组件，全局文件
|-- filters 过滤器，全局工具
|-- icons 图标，全局资源
|-- datas 模拟数据，临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口，临时存放
|-- router 路由，统一管理
|-- store vuex, 统一管理
|-- views 视图目录
| |-- staffWorkbench 视图模块名
| |-- |-- staffWorkbench.vue 模块入口页面
| |-- |-- indexComponents 模块页面级组件文件夹
| |-- |-- components 模块通用组件文件夹

总结

到此这篇关于Vue前端书写规范的文章就介绍到这了,更多相关Vue前端书写规范内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！