我的Vue代码规范文件结构文件命名 • 小写 kebab-case：如data-input.vue 文件夹为最小单元

从个人的编码历程总结一些经验。如有收获，还请关注——猩猩伸手.jpg

文件结构

文件命名

• 小写 kebab-case：如data-input.vue

npm 模块以及内置的 JavaScript 标准模块都默认使用 kebab-case。那么为什么要偏离它呢？

文件夹为最小单元

• 默认vue文件以index.vue即可

只需要对外展示文件夹名称为模块即可复用，且可在内部自行建立common文件夹管理index中的其他组件

单文件格式

让 <template> 、<script> 和 <style> 标签的顺序保持一致。

统一项目阅读习惯

vue路由

• 小写kebab-case

• 以导航栏模块为开头+"/"+模块功能

• 可选：是否需要以list等页面提示语为模块功能的结尾

• 路由name：可使用模块.组件的形式

• 类属性形式：Module.add

自定义组件

名称

应为多个单词，为了和常规标签区分。

组件名应该倾向于完整单词而不是缩写。

• 基础组件名约定——Basexxx

• 单例组件名约定——Thexxx

template模板使用

<PascalCase /> 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。

父子组件

和父组件紧密耦合的子组件应该以父组件名作为前缀命名—— 叠层关系

vue代码编写

有些是通用常见的，相信很多人都知道，就当复习一遍吧。

• 组件数据data必须是个函数

• 总是用 key 配合 v-for

• 永远不要把 v-if 和 v-for 同时用在同一个元素上。

• 组件样式设置作用域scoped

prop 的定义

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

单纯遵循每个语言的约定。

在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。

props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

属性注入

• 多个 attribute 的元素应该分多行撰写，每个 attribute 一行。

• 非空 HTML attribute 值应该始终带引号 (单引号或双引号，以 JS 中未使用的为准)

模板展示表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

应该把复杂计算属性分割为尽可能多的、更简单的 property。

computed: {
 basePrice: function () {
   return this.manufactureCost / (1 - this.profitMargin)
 },
 discount: function () {
   return this.basePrice * (this.discountPercent || 0)
 },
 finalPrice: function () {
   return this.basePrice - this.discount
 }
}

指令缩写

用 : 表示 v-bind:
用 @ 表示 v-on:
用 # 表示 v-slot:
- 个人倾向v-slot，因为#符号在python里面是注释。

数据流传递

一个理想的 Vue 应用是 prop 向下传递，事件向上传递的。

优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或变更 prop。

----END

我的Vue代码规范