Vue.js 个组件大写

Question

是否有 Vue.js 个组件被大写的特定原因？

我经常看到这种情况，但我没有看到为什么要这样写的正当理由。即使是 cli 存储库也有这个组件。

Answer 1

这只是区分组件 constructor/definition（大写）和组件实例的约定。

classes 是大写的，但 class 的实例不是：

const user = new User()

Answer 2

据我所见和使用，vuejs 不介意你的组件文件、组件名称的大小写。

示例：

// HelloWorld.vue   
export default {
  data () {
    return {
      msg: 'Hello'
    }
  }
}

如果用于说 App.vue 喜欢：

//App.vue
<template>
  <HelloWorld></HelloWorld>
  <hello-world><hello-world>
</template>
 
import HelloWorld from 'path/to/HelloWorld' //adding .vue is optional

export default {
  components: {
    HelloWorld
  }
}

绝对不会有任何负面影响，vuejs 不强制执行 W3C 标准

Note that Vue does not enforce the W3C rules for custom tag names (all-lowercase, must contain a hyphen) though following this convention is considered good practice.

source

因此您可以在 kebab-case 或 camelCase vuejs 内部检查它并以相同的方式呈现组件。

Answer 3

React/React-Native 由于Class 的组件架构，开发者习惯于大写组件。所以他们倾向于将其转移到 Vue。

Vue 引擎本身并不关心，它可以很好地解释两者。找到一个惯例并坚持下去。无论哪种方式都很好，只要保持一致即可。

我个人的习惯是将自己制作的组件（组件文件夹）大写，这样我就可以更好地区分自己的组件和 Vuetify 组件。

<v-row class="mt-10">    // Vuetify component
   <v-col cols="12">
      <CustomTeapot />   // My component
   </v-col>
</v-row>

Vue.js 个组件大写

Vue.js components capitalized

vue.js

vue-component

vuejs2