前言
借着 Vue3+ECharts 的可视化项目，刚好学习一下热门的Vue3。Vue3是在Vue2的基础上进行重大改进和重构的版本，它不仅保留了Vue2的核心优势，还引入了许多新特性和优化。
用了一段时间的Vue3，发现与React有许多相似之处，如对于自定义组件的名称，Vue和 React现在都推荐使用 PascalCase 写法，也存在差异，当然是各有各的优点，有了React的学习基础，也更容易上手些。
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
记录问题
之前在使用组件时发现vscode界面的组件标签变红了，但是项目可以正常运行，先去查看了Vetur等相关配置，确认设置没有问题。
接着查看官方文档，是遵循组件名称规范的，确认使用方法没有问题。
搜索项目确认有无重名，还是没有，便思考是否是组件名称问题，把Center改成Center1或CenterChart，代码都不红了，问题解决。
自定义组件名时，尽量不要起像Header、Center等一个单词的名字，这样可能与HTML元素重复，组件名应该由两个或两个以上的单词组合而成（除了root App组件外）、有功能性意义的并具备可读性的。
相关知识点
- setup() 钩子 是 Vue3.x 新增的一个选项， 是组件内使用
组合式 API (Composition API)的入口。使用setup语法糖时，不需要再写 export default { }，属性和方法也不需要 return出去，子组件只需要import就可以直接使用 - 组件命名规范：在单文件组件中，官方推荐自定义子组件使用
PascalCase（大驼峰）格式，以此来和原生的 HTML 元素作区分，与父组件紧密耦合的子组件应该用父组件名作为前缀；在dom模板中应该使用kebab-case格式 - 使用第三方库组件时，需要用小写字母
kebab-case格式，例如，element-ui 的<el-table></el-table>
Vue3项目规范Style Guide | Vue.js (vuejs.org)，这些规则可以提高大多数项目的可读性和开发团队的体验。
