vue cliの中では、templateの中の文字列をコンパイルする機能は持っていない。(CDNの時は、コンパイラも一緒にインストールされる)
そのため、main.jsなどにtemplateを渡した時ブラウザでtemplateの中身を解読できない事態が生じる。
みたいな形があるので、Vue cli内でのコンポーネントのimportの仕方を書いていく。
・templateの中身は一つの要素 （divで囲め）
・export defaultをを先頭に
----LikeNumber.vue---
<template>
<div>
<p>いいね({{number}})</p>
<button @click="increment">+1</button>
</div>
</template>
<script>
export default{
data:function(){
return{
number: 5
}
},
methods:{
increment(){
this.number += 1;
}
}
}
</script>----App.vue-----
<template>
<LikeNumber></LikeNumber> //LikeNumberを入れます。
</template>----main.js----
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import LikeNumber from "./LikeNumber.vue"; //Like Number を定義
Vue.component('LikeNumber',LikeNumber) //グローバルコンポーネントにする
new Vue({
render: h => h(App),
}).$mount('#app')