現在Vue.jsを勉強しています。
Appというインスタンスの他にpage2というインスタンスを作成しようと思います。
vueファイル内でnew Vueと書くことはできないので、main.jsにnew Vueを書くことによって複数のインスタンスを作成します。
コンポーネントを他のコンポーネントでも使えるようにするには、script内をexport defaultで囲むことによってvueインスタンスを生成します。したがって、基本的にscriptの部分は export default で囲むことが前提となります。（なんか足りてない、または間違っている気がするので見直してみます。）
main.js
・main.jsにnew Vueを書くことによって複数のインスタンスを作成します。
・作成するpage2をインポートする必要があります。
main.js
import Vue from 'vue'
import App from './App.vue'
import page2 from './components/page2.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
new Vue({
router,
render: h => h(page2),
}).$mount('#page2')
page2.vue
・id はpage2とする必要があります。
・script内のexport defaultで下記を記述する必要があります。
name: 'page2',
components: {
}
}
page2.vue
<template>
<div id="page2">
<router-view></router-view>
ああああ
</div>
</template>
<script>
export default {
name: 'page2',
components: {
}
}
</script>
これで、元々あったAppに加え、page2という2つのインスタンスをアプリ内に作成することができました。