0

0

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

花韻仙語

花韻仙語

发布时间:2026-02-12 17:27:27

|

187人浏览过

|

来源于php中文网

原创

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

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

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

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

  • mount 只能调用一次,重复调用会报错:App has already been mounted.
  • 挂载点内容会被 Vue 完全覆盖——原来写的 HTML 会消失,别指望“局部增强”
  • 组件得先 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 执行太早。

    wordpress淘宝客主题:Love Shopping红色大气主题
    wordpress淘宝客主题:Love Shopping红色大气主题

    易秀购主题网收集到一款红色的淘宝客主题很不错的,有点想值得买的模板,很适合做淘宝客的童鞋,这款主题需要先去注册阿里妈妈并得到联盟的ID,直接调用淘点金+短代码,大大的方便了添加商品,有简单的SEO功能。如果觉得该模板的SEO功能比较单一不能够满足你,那么你也可以搜索wordpress的SEO插件,很方便。至于如何运营就看自己的了,有大把的人做淘宝客赚了钱,如果通过自己的营销的确可以做的很不错。

    下载
    • 检查 document.getElementById('app') 是否返回 null —— 常见于 ID 拼错、大小写不一致、或节点还没加载完
    • querySelector 时别漏掉 #.,比如 querySelector('app') 查的是 <app></app> 标签,不是 id="app"
    • CDN 引入时,Vue 是全局变量,但 createAppVue 对象下,得写 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 对这些很敏感,但报错信息未必直说。

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    c语言中null和NULL的区别
    c语言中null和NULL的区别

    c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

    243

    2023.09.22

    java中null的用法
    java中null的用法

    在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

    705

    2024.03.01

    全局变量怎么定义
    全局变量怎么定义

    本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

    85

    2025.09.18

    python 全局变量
    python 全局变量

    本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

    101

    2025.09.18

    js正则表达式
    js正则表达式

    php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

    520

    2023.06.20

    js获取当前时间
    js获取当前时间

    JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

    350

    2023.07.28

    js 字符串转数组
    js 字符串转数组

    js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

    508

    2023.08.03

    js是什么意思
    js是什么意思

    JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

    5557

    2023.08.17

    c语言 数据类型
    c语言 数据类型

    本专题整合了c语言数据类型相关内容,阅读专题下面的文章了解更多详细内容。

    2

    2026.02.12

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Vue 教程
    Vue 教程

    共42课时 | 8.3万人学习

    Vue3.x 工具篇--十天技能课堂
    Vue3.x 工具篇--十天技能课堂

    共26课时 | 1.5万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号