当运行vue出现错误Component template should contain exactly one root element. If you ...的时候,我们只需要将<template>标签中的代码包裹到<div>标签中即可。


报错代码

点击查看代码
<template>
<h1>Hello World</h1>
</template>

改为这样才不会报错

点击查看代码
<template>
<div class='hello'>
<h1>Hello World</h1>
</div>
</template>

Vue出现Component template should ...的更多相关文章

  1. "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决

    VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...

  2. VUE之命令行报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 解决办法

    Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...

  3. VUE编译报错 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead

    背景: 在使用VUE添加标签的时候编译报错,报错如下: Component template should contain exactly one root element. If you are u ...

  4. vue报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...

  5. vue之component

    因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data.computed.watch.methods 以及生命周期钩子等.仅有的例外是像 el 这样根实例特有的选 ...

  6. [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    转载自:https://segmentfault.com/a/1190000006435886 解决办法:添加package.config.js配置文件中,添加本文章的红色部分代码 import vu ...

  7. Vue学习笔记 template methods,filters,ChromeDriver,安装sass

    ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80 ...

  8. vue19 组建 Vue.extend component、组件模版、动态组件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue & child component & props

    vue & child component & props vue pass data to child component https://vuejs.org/v2/guide/co ...

随机推荐

  1. Linux环境下Eclipse中快捷键不起作用

    在window->Preferences->general->keys中, 找到 content asist 修改下边值 Binding 改成 Alt+/ When 改为 Editi ...

  2. Python输出数字金字塔

    使用Python输出一个数字金字塔 运行结果: 源代码: ''' Python输出数字金字塔 ''' for x in range(1,10): print(' '*(15-x),end='') n= ...

  3. c++对c的拓展_增强

    一:新增bool类型关键字:c中bool类型需要添加stdbool.h头文件,c++则可直接使用 void test(){ bool a=true; //c++可直接定义而c需添加头文件 true和f ...

  4. webpack打包学习

    从上图我们可以看出,webpack 可以将多种静态资源 js.css.sass文件等转换成一个静态文件,以此可以减少页面的请求,从而提高浏览器响应速度 1.安装开发依赖包 npm install we ...

  5. 电机三环pid控制及调试经验

    一.伺服电机的双环pid 双环pid在正常底盘运动的控制中已经足够了,但是对于双轴云台的控制来说,双环pid的云台控制的响应速度是远远不够的,所以加入了电流环的控制. 两篇大佬的文章--这是我学习pi ...

  6. WePY开发环境的安装和小程序生成WePY项目

    相对于微信开发者工具而言,WePY的安装和生成项目稍显复杂.特记录下安装顺序: 1.安装Node.js 在Node官网(https://nodejs.org/)下载Node.js的安装包,此处我下载的 ...

  7. vue 滚动条样式设置

      App.vue 文件下加入下面css   // 滚动条宽度 ::-webkit-scrollbar{   width: 6px; } /* 定义滚动条轨道 */ ::-webkit-scrollb ...

  8. 2021-ACM-ICPC-济南站 K Search For Mafuyu 【树的遍历与回溯,dfs, 邻接表】

    PAT 题目详情 (pintia.cn) 题目 题意描述 n个房间, 有n-1个通道, kanade初始在1,Mafuyu 位置未知,求K到M的最小期望,也就是到每个地方的平均值,注意的是这里的求法, ...

  9. python黑帽子(第四章)

    Scapy窃取ftp登录账号密码 sniff函数的参数 filter 过滤规则,默认是嗅探所有数据包,具体过滤规则与wireshark相同. iface 参数设置嗅探器索要嗅探的网卡,默认对所有的网卡 ...

  10. MySQL免安装版发生系统错误 1067

    使用MySql免安装版启动时1067 解决办法 打开安装的文件夹 找到my.ini的mysqld模块,调整参数位置. 3. 重新启动Mysql服务 net start mysql