vue项目中组件封装命名规范

1. vue项目中组件封装命名规范参考

• 组件名应该使用单词的首字母大写的驼峰命名法，例如 MyComponent，而不是 mycomponent或者 myComponent；
• 组件名应该尽可能地简洁、直观，并且与组件的功能相关。例如，如果组件是用来显示用户信息的，则可以使用 UserInfo 或者 UserCard 等命名，而不是 ComponentA 或者 CustomComponent 等；
• 如果组件是某个特定组件的子组件，可以在组件名前添加一个前缀来表示它是该组件的子组件，例如 MyButtonGroup 或者 MyDropdownMenu；
• 如果组件是某个页面专属的组件，可以在组件名中加入页面名称的前缀来表示它是该页面的组件，例如 HomePageHeader或者 LoginPageForm；
• 如果组件只是在某个特定的场景中使用，可以在组件名后面添加一个后缀来表示它的用途，例如 FormSubmitButton 或者 ListTableItem。

2. 命名示例

在我的项目首页中，封装了一个统计访问次数的Echarts组件，现在要在首页中使用：

• 子组件命名VisitNumEcharts.vue

  // 子组件
  <template>
    <div :id="chartId" :style="{ width: '100%', height: '100%' }"></div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  export default {
    name: 'VisitNumEcharts',
    // ...
  }
  </script>
  
  

• 父组件中引入并注册组件

  // 父组件
  import VisitNumEcharts from '@/components/VisitNumEcharts'
  
  export default {
    name: 'index',
    components: {
      VisitNumEcharts
    }
    // ...
  }
  

• 父组件 <template>标签中，添加子组件的标签

  // 父组件
  <template>
    <div>
      <visit-num-echarts></visit-num-echarts>
    </div>
  </template>
  

3. 组件名是VisitNumEcharts，而使用时标签却是<visit-num-echarts>？

• VisitNumEcharts组件名是在Vue组件定义中指定的，用于在组件内部和其他组件中引用该组件;
• <visit-num-echarts>标签名是在模板中使用的标签名称，用于在HTML中渲染该组件；
• 组件名和标签名之间存在一个命名转换规则。在Vue中，所有组件名都会被自动转换为 kebab-case （短横线分隔式）的格式。例如，组件名 “MyComponent” 会被自动转换为 “my-component”。这样做的目的是为了让组件名在HTML中更符合通用的命名规范；
• 所以，在父组件中使用 <visit-num-echarts />标签来渲染子组件 VisitNumEcharts。

4. 子组件内部的name值必须和组件名一致吗？

• 组件的 name选项不会影响组件的标签名，它们是两个不同的概念；
• name 选项用于指定组件的名称，以便在Vue.js开发工具中进行调试时可以更容易地识别组件；
• name 选项可以是 VisitNumEcharts 或者其他有意义的名称，例如 MyVisitNumEcharts或者 VisitNumChart 等，具体取决于组件的功能和用途。

5. 导入组件时必须带文件扩展名吗？

• 取决于构建工具和打包配置。在一些构建工具中，如Webpack，会自动解析文件扩展名，所以不需要带文件扩展名，具体参考所使用的构建工具的文档或者查看相关配置文件