当运行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. 利用css3渐变效果实现圆环旋转效果

    * { margin: 0; padding: 0; } .stage { width: 200px; height: 130px; margin: 100px auto; position: rel ...

  2. 最长非降子序列的N*logN解法

    之前讲到过求最长非降子序列的O(N^2)解法. 链接 这次在原来的基础上介绍一下N*logN解法. 该解法主要是维护一个数组minValue,minValue[i]表示最长上身子序列长度为i的数的最小 ...

  3. 爬虫---scrapy全站爬取

    全站爬取1 基于管道的持久化存储 数据解析(爬虫类) 将解析的数据封装到item类型的对象中(爬虫类) 将item提交给管道, yield item(爬虫类) 在管道类的process_item中接手 ...

  4. Chrome JSON格式化插件

    1.JSONView插件下载地址:https://github.com/gildas-lormeau/JSONView-for-Chrome 2.解压(E:\json) 3.打开Chrome-扩展程序 ...

  5. LC-203

    给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val == val 的节点,并返回 新的头节点 . 示例 1: 输入:head = [1,2,6,3,4,5, ...

  6. 进程的概念及multiprocess模块的使用

    一.进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.在早期面向进程设计的计算机结构中,进程是程序的基本执行实体:在 ...

  7. 入门学习SpringCloud

    今天趁着空余时间,看了一丁点狂神SpringCloud的视频.学习微服务及架构相关知识,明天再学习系列视频的剩下部分,部署第一个SpringCloud练习. 同时趁着晚上课后大家有时间组织了小型会议, ...

  8. 【课程汇总】OpenHarmony 成长计划知识赋能第三期系列课程(附链接)

    OpenHarmony 开源开发者成长计划第三期知识赋能课程硬核程度再次升级,带领开发者上手 OpenHarmony 的标准系统应用开发,学习标准设备应用开发,使用 eTS UI 开发分布式应用样例, ...

  9. 配置docker阿里加速器

    阿里云会根据账号生成一个账号加速器地址,例如: https://jywd41dg.mirror.aliyuncs.com 将加速器地址配置到docker的daemon.json文件中:# 编辑daem ...

  10. Apache Flink系列-④有状态函数

    有状态函数:独立于平台的有状态无服务器堆栈   这是一种在现代基础设施上创建高效.可扩展且一致的应用程序的简单方法,无论规模大小.   有状态函数是一种API,它通过为无服务器架构构建的运行时简化了分 ...