Do not mount Vue to <html> or <body> - mount tonormal elements instead.

最新推荐文章于 2023-01-04 15:55:46 发布
最新推荐文章于 2023-01-04 15:55:46 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： vue-js 文章标签： vue-js webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013746071/article/details/78040622
版权 
1.vue1.x 允许开发者以 <body> 或 <html> 作为根实体的挂载点，但到了VueJS2.0 后，只能通过独立的节点挂载 ，如:div 等。否则会产生错误，警告讯息如下："Do not mount Vue to <html> or <body> - mount tonormal elements instead." 换成用独立的 DOM 节点，如 <divid="app"></div>，
或者 
<div>
     <app></app>
  </div>
就可以正常运作了. 

2. Vue2.x在loader上不支持直接书写！style！css！style.css；应该为都为每个loader添加一个-loader；
曾曾子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2+Webpack错误：Do not mount Vue to <html> or <body> - mount tonormal elements instead.
jCuckoo的专栏
02-22 4288
vue1.x 允许开发者以 或 作为根实体的挂载点，但到了VueJS2.0 后，只能通过 独立的节点挂载 ，如:div 等。 否则会产生错误，警告讯息如下："Do not mount Vue to or - mount tonormal elements instead." 换成用独立的 DOM 节点，如 ，就可以正常运作了。
[Vue warn]: Do not mount Vue to 「html」 or 「body」 - mount to normal elements instead.
朝花夕拾的博客
07-01 1347
不要将Vue挂载到<html>或<body> - mount到普通元素 如下图就会报这个错误 改成这样即可
Do not mount Vue to <html> or <body> - mount to normal elements instead.
热爱思考、活力满满、开朗爱笑的年轻人
11-02 1772
在使用 vue-cli 构建项目时（使用的模版是webpack） 初始化的 main.js 中是这样的。/* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } });然后将挂载点改为： el: 'body' ，然后浏览器就会报这个警告：[Vue
控制台报 Do not mount Vue to html or body mount to normal elements instead
blueberry_liang的博客
07-18 434
提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。=&amp;amp;amp;amp;amp;gt; 用普通元素作为挂载点，例如div...
[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
weixin_33824363的博客
02-13 291
官方文档是这么解释的: 提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载root实例到<html>或者<body>上。 这是vue2.0的最新写法,我们看到的是vue项目的主入口main.js,template是将会替换el的挂载元素的模板 区别一定是:el对应的 一定是一个css选择器,如果还...
Vue中通过<script></script>引入的Vue.js文件
04-28
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。 格式就是： <script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"></script> src里面的内容根据自己的下载的Vue.js的...
vue-html-to-paper:Vue mixin for paper printing html elements
05-12
如果`vue-html-to-paper` 是作为依赖项安装的，可以通过`npm install vue-html-to-paper` 或 `yarn add vue-html-to-paper` 来完成。 2. 导入混入并将其添加到你的组件中： ```javascript import VueHtmlToPaper ...
vue-fullpage.js-Vue.js的官方fullPage.js组件。-Vue.js开发
05-27
Vue-fullpage.js fullpage.js库的官方Vue.js包装器。 在线演示| Codepen fullpage.js扩展名@ imac2。 感谢VasiliyGryaznoy Vue-fullpage.js fullpage.js库的官方Vue.js包装器。 在线演示| Codepen fullpage.js扩展名...
vue.js使用v-pre与v-html输出HTML操作示例
10-18
例如，在以下代码中，`<span v-pre>{{ 这里的内容不会被编译 }}</span>` 中的 `{{ 这里的内容不会被编译 }}` 将会原样显示，而不是被 Vue.js 替换为相应的数据绑定值： ```html <div id="app"> <span v-pre>{{ ...
vue-count-to:vue-countTo的改造版本，支持 vue 2.0、3.0 版本
04-30
vue3-count-to基于 vue-count-to 升级改造预览目的由于原有作者好像没打算升级版本，故而自己升级维护一下。兼容当前版本同时兼容 vue2、vue3，亦能在ts下使用运行环境已经测试的运行环境，vite建议使用2.0+，...
vue2.0(新手)第一个坑--do not mount Vue to <body>!!!
aaa333qwe的博客
08-27 448
转载自：http://blog.csdn.net/wmwmdtt/article/details/53589662 [javascript] view plain copy import Vue from 'vue';   import App from './App';      /* eslint-disable no-new 
vue 挂载body报错
weixin_44556152的博客
01-14 383
1、 众所周知vue2.0版本一上，不能直接挂载body 2、el：body 、$mount() 肯定会抛出问题，提供的元素只能作为挂载点。不同于 Vue 1.x，所有的挂载元素会被 Vue 生成的dom替换m 3、如何挂载自己定义的实例 appendchildl 啦 ...
腾讯前端一面常考vue面试题汇总
bb_xiaxia1998的博客
01-04 3317
1. 分析首先找到的构造函数源码位置：src\core\instance\index.js 是用户传递过来的配置项，如等常用的方法构建函数调用方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法 首先可以看方法，发现该方法在原型上定义了方法源码位置：src\core\instance\init.js 仔细阅读上面的代码，我们得到以下结论：方法是完成的初始化源码位置：src\core\instance\state.js 我们和这里主要看初始化的方法为，它与在同一文件上 仔细阅读上
Vue2+Webpack报错：Failed to mount component: template or render function not defined.
jCuckoo的专栏
02-22 2万+
需要在webpack.config.js文件中添加以下配置： resolve: { /** * Vue v2.x之后NPM Package默认设置只会生成runtime-only 版本，若要使用standalone功能則需如下设置 * 否则会报错：Failed to mount component: template or render fun
深入浅出学Vue开发：第四章、Vue的生命周期及源码实现
LGD_Sunday的专栏
08-03 2782
通过上面两章的学习，我们已经学会了Vue的所有基础语法，包括： 1、{{Mustache}} 语法 2、v-if、v-else、v-else-if、v-show 3、v-for 4、v-bind 5、v-model 6、v-on 如果大家已经对这些语法牢记于心了，那么请继续往下看，如果大家对这些语法掌握的并不是很熟练的话，那么希望大家再去回顾一下前面的...
vue引入组件无法显示且报错[Vue warn]: Do not use built-in or reserved HTML elements as component id: header
热门推荐
涂涂
12-19 3万+
一、Vue在引入组件后无法显示组件内容且报错如下： [Vue warn]: Do not use built-in or reserved HTML elements as component id: header 二、原因是vue里面不允许用特殊的标签来做自定义的标签比如你不能用a来接收一个组件的注册然后在以自定义标签的方式引用会被限制 三、解决方案 在component里面注册组件的时
Vue源码解析(一)，Vue中DOM的挂载过程
qq_36297981的博客
05-05 3239
1.从入口开始 new Vue()做了什么 从入口文件开始，我们来分析一下new Vue()做了哪些工作，Vue实际上是一个类，我们通过new Vue() 来创建一个Vue实例。现在来看一下源码，在src/core/instance/index.js function Vue (options) { // 判断是否通过new 创建Vue实例 if (process.env.NODE_ENV...
报错如下 vue.runtime.esm.js:4605 [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <BaiduMap> <MapDemo> at src/views/mapDemo.vue <ElMain> at packages/main/src/main.vue <ElContainer> at packages/container/src/main.vue... (1 recursive calls) <Main> at src/views/Main.vue <App> at src/App.vue <Root>
最新发布
07-17
这个错误通常是由于Vue组件中没有定义模板或渲染函数导致的。 根据你提供的错误信息，看起来是在`MapDemo`组件中使用了`BaiduMap`组件，但是没有正确定义模板或渲染函数导致的错误。 请确保在`MapDemo`组件中定义了正确的模板或渲染函数。例如，你可以在`MapDemo`组件的`template`标签中添加一个根元素，并在其中使用`BaiduMap`组件。 以下是一个示例： ```vue <template> <div> <BaiduMap></BaiduMap> </div> </template> <script> import BaiduMap from 'path/to/BaiduMap.vue'; export default { components: { BaiduMap }, // 其他组件选项 } </script> <style> /* 组件样式 */ </style> ``` 在示例中，我们在`MapDemo`组件的模板中使用了`<BaiduMap></BaiduMap>`来引入和使用`BaiduMap`组件。确保路径正确，以正确引入`BaiduMap`组件。 如果你仍然遇到问题，请提供更多相关代码，我将尽力帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值