main.js, App.vue, index.html關係
阿新 • • 發佈：2019-01-27
1.main.js
import Vue from 'vue' import App from './App' ...... new Vue({ //掛載到index.html的<div id="app"> el: '#app', //router物件，包含路由資訊 router, //在該根例項中註冊App.vue中的App元件 components: {"App": App}, //模版，vue文件中說是會使用template來替換被掛載的節點，也就是index.html的<div id="app"> template: '<App/>' })
2.App.vue
<template>
<div id="app" v-cloak>
<!--被匹配成功的元件將會被渲染到這裡-->
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>3.index.html
<!DOCTYPE html> <html> <body> <!--被main.js掛載的標籤--> <div id="app"></div> </body> </html>
說明：main.js中的根例項會掛載到index.html中的<div id="app">，且用template替換，即替換為<App></App>. 由於根例項註冊了App元件，所以這標籤就是App.vue元件。由於App.vue中含有<router-view/>，所以路由匹配成功的頁面都在這裡進行渲染和切換。