Vue组件名必须为多单词以避免HTML冲突，推荐统一用kebab-case（如my-header）确保DOM模板、.vue文件和SSR环境兼容，并加前缀（如base-、the-）规避原生标签风险。
Vue 组件注册时支持多单词名称，关键在于命名方式与使用场景的匹配。官方明确要求：**组件名必须是多单词的**，以避免与原生 HTML 元素（如
必须用 kebab-case（短横线分隔）用于 DOM 模板
当你在纯 HTML 模板中直接写组件标签（比如 index.html 里写
-
正确：注册为
'my-header'，模板中写<my-header></my-header> -
错误：注册为
'MyHeader'，却在 DOM 中写<myheader></myheader>—— 浏览器会当作未知 HTML 标签，不解析组件
PascalCase 仅限脚手架环境 + 字符串/单文件组件内使用
在 Vue CLI 或 Vite 创建的项目中（即有编译器的环境），你可以在 JS 中注册为 'MyHeader'，然后在 .vue 文件的 template 里灵活使用：
-
<my-header></my-header>（自动转换，推荐） -
<myheader></myheader>（语法合法，但团队协作中易引发大小写混淆）
注意：这种灵活性不适用于直接挂载在 HTML 的 DOM 模板中——那里只认 kebab-case。
python-flask-vue-creator
下载
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
立即学习“前端免费学习笔记（深入）”；
文件名、注册名、标签名三者保持一致最稳妥
为减少维护成本和歧义，建议统一采用 kebab-case：
- 文件名：
my-header.vue - 注册名：
components: { 'my-header': MyHeader }（局部）或app.component('my-header', MyHeader)（全局） - 模板中：
<my-header></my-header>
这样无论在哪种环境（DOM 模板、.vue 文件、SSR）都能稳定工作，也符合 W3C 自定义元素规范。
额外提醒：避开 HTML 已有词汇，加前缀更保险
即使用了多单词，也要检查是否撞上未来可能新增的 HTML 标签。例如 'my-menu' 安全，但 'my-details' 就有风险（HTML 已有 <details></details>）。更严谨的做法是加业务或基础前缀：
- 基础组件：用
base-开头，如base-button - 页面级唯一组件：用
the-开头，如the-header - 父组件子项：用父名前缀，如
user-profile-card
