vue3脚手架项目示例vue组件使用大写字母开头的命名规范，组件名和文件名同名，但是因为和第三方库、VSCode+TypeScript集成导致组件名称很难到统一，下面就介绍一下这方面的问题，感兴趣的可以看到我相关的其他文章，这对于想搭建一个规范，简洁明了的大型工程项目有很好的参考价值。如果有自己带个团队，搭建过大型项目、并持续长期维护经验的朋友，就知道这玩意有多重要了，可以细致到文件、文件夹结构和命名。
1 至少保持两个单词
上面这个比较容易保证，其目的好像是防止和html标签冲突，不易于识别，我在另一篇文章中也吐槽过这个问题。
vue3脚手架示例工程中组件vue文件，除了App.vue是单个单词，其他的基本都是双字母，如下图
组件使用类似如下：
通过上面的示例，我们就认为文件名和组件名字是一样的。但是这个玩意开了一个口子，在TheWelcome 文件中你可以定义组件的名字叫xx。这个name通常不会用，默认组件名字就是和文件名字一样。需要重新取名字的情况是Eslint检查到你的文件名是单个单词，如Home.vue 那个就要求你的文件名必须是两单词的，如果你不想改文件名，你就可以在Home.vue文件中整个名字叫HomeView。这可能会导致你看见组件名字，不知道是对应那个文件，所以还是建议改文件名。
2 组件使用名字决策
这个就相当难搞了,看上面的例子，你会肯定会认为组件使用的时候和文件名保持一致，但是当你用了element-plus组件时，你发现它的标签用的时候横杠，如el-table-column。好这个就相当炸裂了。你会怎么做，如果你有点洁癖，我相信你会将<TheWelcome/> 改成<the-welcome/>，保持统一，而且VS Code输入提示得时候也是the-welcome，看起来很美好，一箭双雕。我想说你高兴得太早了。TypeScript出来做一把妖，看如下代码：
我的子类代码如下：
//AddConfig.vue
const dialogFormVisible = ref(false)
//展示弹出框
function showAddPop() {
dialogFormVisible.value = true
}
//暴露给父类调用
defineExpose({
showAddPop,
})
//父组件代码如下
<div><add-config ref="addConfigEl"></add-config>xx</div>
//下面这个声明一个元素引用，看起来相当蛋疼，这能提升开发效率，表示无法理解，
//不加类型写法 const addConfigEl =ref(null)，我表示才疏学浅，看不出来那个可维护性和可读性好
const addConfigEl = ref<InstanceType<typeof AddConfig> | null>(null)
const addConfig = () => {
if (addConfigEl.value) {
addConfigEl.value.showAddPop()
} else {
alert('xxxx')
}
}
父组件代码中如果不把add-config 改成AddConfig
addConfig 中addConfigEl.value就会提示找不到showAddPop，实际上就是识别不了add-config这下只能改回来，不知道该怎么办了，就是这样随便整。
3 复杂配置
Vue+VSCode+Vite+TypeScript+Prettier+Eslint，简单配置文件如下
这么多配置一眼望去什么感觉？我告诉你这些都是必须的，而且你还必须掌握，因为你干着干着就会遇到很多问题，项目本身的复杂性和问题TypeScript至少占一半以上的功劳，如果有谁不把any类型开启，执行严格检查模式，我表示很佩服，比我还洁癖，我只能说你不适合脚本语言，哈哈。