footbar：vue组件命名风格

单文件组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头 (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