- Component template should contain exactly one root element

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/you23hai45/article/details/82986463

1、错误描述

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                        17:59:34


 error  in ./src/components/Muse.vue

(Emitted value instead of an instance of Error)
  Error compiling template:

  <mu-button class="demo-color-btn" color="primary">AAAA</mu-button>
  <mu-button class="demo-color-btn" color="success">BBBB</mu-button>
  <mu-button class="demo-color-btn" color="indigo400">CCCC</mu-button>
  <mu-button class="demo-color-btn" color="#156956">DDDD</mu-button>

  - 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.


 @ ./src/components/Muse.vue 11:0-360
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js

2、错误原因

      在使用muse-ui组件时，插入几个按钮，但是没有根节点元素

 <mu-button class="demo-color-btn" color="primary">AAAA</mu-button>
 <mu-button class="demo-color-btn" color="success">BBBB</mu-button>
 <mu-button class="demo-color-btn" color="indigo400">CCCC</mu-button>
 <mu-button class="demo-color-btn" color="#156956">DDDD</mu-button>

3、解决办法

      需要在这几个按钮的外层添加一个元素作为根节点

 <div>
    <mu-button class="demo-color-btn" color="primary">AAAA</mu-button>
    <mu-button class="demo-color-btn" color="success">BBBB</mu-button>
    <mu-button class="demo-color-btn" color="indigo400">CCCC</mu-button>
    <mu-button class="demo-color-btn" color="#156956">DDDD</mu-button>
  </div>