vue组件命名方式/使用方式

1、定义组件名的方式有两种：

使用 kebab-case
当使用 kebab-case (短横线分隔命名) 定义一个组件时，
你也必须在引用这个自定义元素时使用 kebab-case，例如 。

Vue.component('my-component-name', {
    
     /* ... */ })

使用 PascalCase
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意，尽管如此，直接
在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

Vue.component('MyComponentName', {
    
     /* ... */ })

2、项目中的具体用法:

<template>
  <el-container class="layout_container">
    <el-header height="auto"><header></header></el-header>
    <el-container>
      <el-aside width="auto"><aside></aside></el-aside>
      <el-main><zonghe-nengli></zonghe-nengli>
      <skill-hot></skill-hot>
      <learning-path></learning-path>
      <radar></radar>
      <tupu-fenxi></tupu-fenxi>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import Header from "../../components/layout/header";
import Aside from "../../components/layout/aside";
import ZongheNengli from "../../components/common/zonghenengli";
import Radar from "../../components/common/radar";
import TupuFenxi from "../../components/common/tupufenxi";
import SkillHot from '../../components/putong/skillhot'
import LearningPath from '../../components/putong/learningpath'
export default {
    
    
  components: {
    
    
    Header,
    Aside,
    ZongheNengli,
    Radar,
    TupuFenxi,
    SkillHot,
    LearningPath
  },
  data() {
    
    
    return {
    
    };
  },
  created() {
    
    },
  methods: {
    
    },
  computed: {
    
    },
};
</script>
<style scoped>
.layout_container {
    
    
  height: 100%;
}
.el-aside {
    
    
  margin-top: 21px;
  background: #ffffff;
  box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.35);
}
.el-main {
    
    
  margin-top: 40px;
  margin-left: 37px;
  background-color: burlywood;
}
</style>

3、总结：

命名方式种类：helloVue(Camel Case即驼峰命名法)，HelloVue（PascalCase即帕斯卡命名法）
为了以防万一，命名的时候统一使用帕斯卡命名法
但是在使用的时候统一使用 kebab-case命名方法

4、组件是怎样渲染的：

在DOM中直接调用组件（上面代码就是此种方式）
调用组件的元素全部会被全部解析为小写字母，比如会被解析为,然后去匹配组件名，匹配组件名顺序是：hello-vue(全小写)，helloVue(Camel Case即驼峰命名法)，HelloVue（PascalCase即帕斯卡命名法），如果能够匹配到组件，就可以使组件生效。