单文件组件文件的大小写
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
单词大写开头对于代码编辑器的自动补全最为友好,因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而,混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题,这也是横线连接命名同样完全可取的原因
反例
components/
|- mycomponent.vue
components/
|- myComponent.vue
好例子
components/
|- MyComponent.vue
components/
|- my-component.vue
采用PascalCase 命名
js中命名
import HeaderBar from "./components/HeaderBar";
export default {
name: "Layout",
components: {
HeaderBar,
},
html 中使用
<div>
<header-bar></header-bar>
</div>
其他命名
js中命名
import footbar from "./components/FootBar";
export default {
name: "Layout",
components: {
footbar,
},
html中使用
<div>
<footbar></footbar>
</div>
js中命名
import footbar from "./components/FootBar";
export default {
name: "Layout",
components: {
"foot-bar":footbar,
},
html中使用
<div>
<foot-bar></foot-bar>
</div>
基础组件名
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 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/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue