vue.js如何将组件添加到html里

vue 3 必须用 createapp 创建实例并 mount 到已存在的非 body/html 的 dom 节点（如 id=”app” 的 div），mount 仅能调用一次，组件需显式定义或 definecomponent 包裹，全局注册后才可在模板中使用，cdn 下需 vue.createapp，开发务必用 dev 版本以获取有效错误提示。

直接用 createApp 挂载到 DOM 节点就行

Vue 3 不再支持 new Vue()，必须通过 createApp 创建应用实例，再调用 mount 方法绑定到一个已有 HTML 元素上。这个元素不能是 或 ，推荐用带 id 的 <div>。 <ul> <li>确保目标 DOM 节点在执行 <code>mount 前已存在（脚本放在 前，或用 DOMContentLoaded 包裹）

组件得先 defineComponent 或直接写对象，再注册进 app

单文件组件（.vue）需经构建工具（如 Vite）处理；纯 HTML + js 环境下，组件必须显式定义为对象或用 defineComponent 包裹（后者更安全，尤其涉及 TS 或 Composition API 时）。

• 直接用对象： { template: '<div>Hello</div>', data() { return { msg: 'hi' } } }
• 用 defineComponent：避免某些运行时警告，比如使用 setup() 时必须包裹
• 全局注册用 app.component('MyComp', Comp)，模板里才能写 <my-comp></my-comp>
• 不注册就直接在根组件 template 里用，会报错：Unknown custom element: <my-comp></my-comp>

常见错误：挂载后页面空白或报 TypeError: Cannot read properties of NULL

基本都是 DOM 节点没找对，或者 script 执行太早。

• 检查 document.getElementById('app') 是否返回 null —— 常见于 ID 拼错、大小写不一致、或节点还没加载完
• 用 querySelector 时别漏掉 # 或 .，比如 querySelector('app') 查的是 <app></app> 标签，不是 id=”app”
• CDN 引入时，Vue 是全局变量，但 createApp 在 Vue 对象下，得写 Vue.createApp(...).mount(...)
• 如果用了 script type="module"，注意模块作用域，默认拿不到全局 Vue，得显式 import

开发时别用 production 版本的 Vue CDN

生产版本删掉了所有警告和开发提示，遇到挂载失败、组件未注册等问题，控制台静悄悄，排查成本翻倍。

立即学习“前端免费学习笔记（深入）”；

• 本地调试务必用 https://unpkg.com/vue@3/dist/vue.esm-browser.js（带 dev 提示）
• 上线前才换 vue.esm-browser.prod.js
• 错误信息如 Component is missing template or render function 只在 dev 版出现，它能立刻告诉你组件定义缺了什么

实际最常卡住的，是以为写了 <div id="app"></div> 就万事大吉，结果 script 加载顺序不对，或者组件名注册和模板里写的大小写/短横线风格不一致——Vue 对这些很敏感，但报错信息未必直说。