Vue精简版风格指南（推荐）
前端之家收集整理的这篇文章主要介绍了
Vue精简版风格指南（推荐），
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前面的话
Vue官网的风格指南按照优先级（依次为必要、强烈推荐、推荐、谨慎使用）分类，且代码间隔较大，不易查询。本文按照类型分类，并对部分示例或解释进行缩减，是Vue风格指南的精简版
【组件名为多个单词】（必要）
组件名应该始终是多个单词的，根组件 App 除外。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的
【单文件组件文件名应该要么始终是单词大写开头 (PascalCase)，要么始终横线连接 (kebab-case)】（强烈推荐）
【基础组件名要有一个特定前缀开头】（强烈推荐）
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V
【只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性】（强烈推荐）
这不意味着组件只可用于一个单页面，而是 每个页面 只使用一次，这些组件永远不接受任何 prop
【和父组件紧密耦合的子组件应该以父组件名作为前缀命名】（强烈推荐）
【组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾】（强烈推荐）
Box.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheck
Box.vue
//good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheck
BoxTerms.vue
|- SettingsCheck
BoxLaunchOnStartup.vue
【单文件组件和字符串模板中组件名应总是PascalCase——但在DOM模板中总是kebab-case】（强烈推荐）
//good
【组件名应该倾向于完整单词而不是缩写】（强烈推荐）
组件相关
【单文件组件、字符串模板和JSX中没有内容的组件应该自闭合——但在DOM模板里不要这样做】（强烈推荐）
自闭合组件表示它们不仅没有内容，而且刻意没有内容
//good
【为组件样式设置作用域】（必要）
这条规则只和单文件组件有关。 不一定 要使用 scoped 特性。设置作用域也可以通过 CSS Modules，或者使用其它的库或约定
【单文件组件应该总是让
...
...
【一个文件中只有一个组件】（强烈推荐）
【组件选项默认顺序】（推荐）
1、副作用 (触发组件外的影响)
el
2、全局感知 (要求组件以外的知识)
name
parent
3、组件类型 (更改组件的类型)
functional
4、模板修改器 (改变模板的编译方式)
delimiters
comments
5、模板依赖 (模板内使用的资源)
components
directives
filters
6、组合 (向选项里合并属性)
extends
mixins
7、接口 (组件的接口)
inheritAttrs
model
props/propsData
8、本地状态 (本地的响应式属性)
data
computed
9、事件 (通过响应式事件触发的回调)
watch
生命周期钩子 (按照它们被调用的顺序)
10、非响应式的属性 (不依赖响应系统的实例属性)
methods
11、渲染 (组件输出的声明式描述)
template/render
renderError
prop
【Prop 定义应该尽量详细】（必要）
细致的 prop 定义有两个好处： 1、它们写明了组件的 API，所以很容易看懂组件的用法； 2、在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源
required: true
}
}
【声明prop时，其命名应始终使用camelCase，而在模板和JSX中应始终使用kebab-case】（强烈推荐）
指令及特性
【总是用 key 配合 v-for】（必要）
【不要把 v-if 和 v-for 同时用在同一个元素上】（必要）
{{ user.name }}
//good
{{ user.name }}
【多个特性的元素应该分多行撰写，每个特性一行】（强烈推荐）
logo.png" alt="Vue
logo">
//good
【元素特性默认顺序】（推荐）
1、定义 (提供组件的选项)
is
2、列表渲染 (创建多个变化的相同元素)
v-for
3、条件渲染 (元素是否渲染/显示)
v-if
v-else-if
v-else
v-show
v-cloak
4、渲染方式 (改变元素的渲染方式)
v-pre
v-once
5、全局感知 (需要超越组件的知识)
id
6、唯一的特性 (需要唯一值的特性)
ref
key
slot
7、双向绑定 (把绑定和事件结合起来)
v-model
8、其它特性 (所有普通的绑定或未绑定的特性)
9、事件 (组件事件监听器)
v-on
10、内容 (复写元素的内容)
v-html
v-text
【私有属性名】（必要）
在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀，并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_ )
【组件的data必须是一个函数】（必要）
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数
【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）
【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）
【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）
required: true
},focused: {
type: Boolean,default: false
}
}
谨慎使用
1、元素选择器应该避免在 scoped 中出现
在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的
button {
background-color: red;
}
//good
2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop
3、应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线
4、如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个
元素)
错误：{{ error }}
{{ results }}
//good
{{ results }}
总结
以上所述是小编给大家介绍的Vue精简版风格指南。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
