vue2风格规范

---

前言

项目开发，以个人愚见，应从规范入手，遵从社区规范，学习前辈们经验总结的最佳实践，这于个人于团队都是有利的。

编程除了有些是靠思维，我认为大多数还是靠记忆的，所以这里我觉得规范和最佳实践可以去牢记，在开发中铭记，这样有利于自己去避坑、去写出良好的代码。

以下内容主要基于vue2，摘录于官方推荐和《深入浅出vue.js》一书，vue3可在实际开发中参考官方文档。

vue2风格规范
vue3风格规范

---

单组件如何命名

单文件组件的文件名的大小写

单文件组件的文件名应该始终是单词首字母大写（PascalCase），或者始终是横线连接的（kebab-case）。

单词首字母大写对于编辑器的自动补全最为友好，因为这会使JS(X)和模板中引用组件的方式尽可能一致，然而，混用文件的命名方式有时候会导致文件系统对大小写不敏感的问题，这也是横线连接命名可取的原因。

不好的例子：

components/
| - mycomponent.vue
components/
| - myComponent.vue

好的例子：

components/
| - MyComponent.vue
components/
| - my-component.vue

基础组件名

应用特定样式和约定的基础组件（也就是展示类的、无逻辑的或无状态的组件）应该全部以一个特定的前缀开头，比如Base、App或V。这些组件可以为你的应用奠定一致的基础样式和行为。它们可能只包括：

• HTML元素
• 其他基础组件
• 第三方UI组件库

它们绝不会包括全局状态（比如来自vuex store）

它们的名字通常包含所包裹元素的名字（比如BaseButton、BaseTable），除非没有现成的对应功能的元素（比如BaseIcon）。如果你为特定的上下文构建类似的组件，那么它们几乎总会消费这些组件（比如BaseButton可能会用在ButtonSubmit上）。

这样做的几个好处如下：

• 当你在编辑器中以字母顺序排序时，应用的基础组件会全部列在一起，这样更容易识别。
• 因为组件名应该始终是多个单词，所以这样做可以避免你在包裹简单组件时随意选择前缀（比如MyButton和VueButton）。
• 因为这些组件会被频繁使用，所以你可能想把它们放在全局而不是在各处分别导入它们。使用相同的前缀可以让webpack这样工作：

var requireComponent = require.context("./src",true,/^Base[A-Z]/)
requireComponent.keys().forEach(function(fileName){
   
    var baseComponentConfig = requireComponent(fileName)
    baseComponentConfig = baseComponentConfig.default || baseComponentConfig
    var baseComponentName = baseComponentConfig.name || (
        fileName.replace(/^.+\//,'').replace(/\.\w+$/,'')
    )
    Vue.component(baseComponentName,baseComponentConfig)
})

不好的例子：

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

好的例子：

components/
| - BaseButton.vue
| - BaseTable.vue
| - BaseIcon.vue
components/
| - AppButton.vue
| - AppTable.vue
| - AppIcon.vue
components/
| - VButton.vue
| - VTable.vue
| - VIcon.vue

单例组件名

只拥有单个活跃实例的组件以The前缀命名，以示其唯一性。但这并不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何prop，因为它们是为你的应用定制的，而不是应用中的上下文如果你发现有必要添加prop，就表明这实际上是一个可复用的组件，只是目前在每个页面只使用一次。

不好的例子：

components/
| - Heading.vue
| - MySidebar.vue

好的例子：

components/
| - TheHeading.vue
| - TheSidebar.vue

紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名为前缀命名。

如果一个组件只在某个父组件的场景下有意义，那么这层关系应该体现在其名字上。编辑器通常会按字母顺序组织文件，这样做可以把相关联的文件排在一起。

通常，我们可以通过在父组件命名的目录中嵌套子组件以解决这个问题，比如：

coomponents/
｜ - TodoList
    | - Item/
        | - index.vue
        | - Button.vue
    | - index.vue

或者：

components/
| - TodoList/
    | - Item/
        | - index.vue
    | - Item.vue
| - TodoList.vue

但是我们并不推荐这种方式，