javascript
1//App.vue 2 3<template> 4 <div id="app"> 5 <img src="./assets/logo.png"> 6 <router-view></router-view> 7 </div> 8</template> 9 10<script> 11export default { 12 name: 'App' 13} 14</script> 15 16<style> 17#app { 18 font-family: 'Avenir', Helvetica, Arial, sans-serif; 19 -webkit-font-smoothing: antialiased; 20 -moz-osx-font-smoothing: grayscale; 21 text-align: center; 22 color: #2c3e50; 23 margin-top: 60px; 24} 25</style> 26
javascript
1//App2.vue 2 3<template> 4 <div id="app2"> 5 <img src="../assets/nakata.jpg"> 6 </div> 7</template> 8 9<script> 10export default { 11 name: 'App2' 12} 13</script> 14 15<style> 16#app2 { 17 font-family: 'Avenir', Helvetica, Arial, sans-serif; 18 -webkit-font-smoothing: antialiased; 19 -moz-osx-font-smoothing: grayscale; 20 text-align: center; 21 color: #2c3e50; 22 margin-top: 60px; 23} 24</style> 25
javascript
1//main.js 2 3// The Vue build version to load with the `import` command 4// (runtime-only or standalone) has been set in webpack.base.conf with an alias. 5import Vue from 'vue' 6import App from './App' 7import App2 from './App2' 8import router from './router' 9 10Vue.config.productionTip = false 11 12/* eslint-disable no-new */ 13new Vue({ 14 el: '#app', 15 router, 16 components: { App, App2 }, 17 template: '<App/><App2/>' 18})
vue-cliを使って環境を作りました。
このようにすると、
"Component template should contain exactly one root element. "
というエラーが出てしまいます。
これはつまり、 <div id="app"></div> と <div id="app2"></div> が両方ともルートになってしまってるから起きてしまってるのでしょうか。
ただ、AppコンポーネントもApp2コンポーネントもそれぞれがコンポーネントであって、それぞれでルートエレメントを1つだけ持ててるから、"Component template should contain exactly one root element. "という要件は満たせてるように思えます。
このエラー文で言う"Component"とはなんなんでしょうか、 AppやApp2それぞれがコンポーネントなんじゃなくて、これらを合わせたものが1つのコンポーネントなんでしょうか。
私のイメージだと
html
1 2<div id="app"> 3 4 <App></App> 5 <App2></App2> 6 7</div> 8
という風になってくれるのかなと思っていたのですが...
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/11 04:14