vue main.js App.vue index.html之間的聯絡
阿新 • • 發佈：2019-01-11
1.main.js
1 import Vue from 'vue' 2 import App from './App'
3 //根例項 4 new Vue({ 5 //掛載到index.html的<div id="app"> 6 el: '#app', 7 //router物件，包含路由資訊 8 router, 9 //在該根例項中註冊App.vue中的App元件 10 components: {"App": App}, 11 //模版，vue文件中說是會使用template來替換被掛載的節點，也就是 index.html 的<div id="app"> 13 template: '<App/>' 14 })
2.App.vue
<template> <div id="app" v-cloak> <!--被匹配成功的元件將會被渲染到這裡--> <router-view/> </div> </template> <script> export default { name: 'App' } </script>
3.index.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/>，所以路由匹配成功的頁面都在這裡進行渲染和切換。
---------------------
作者：轉的你死
來源：CSDN
原文：https://blog.csdn.net/a493556721/article/details/81979558
版權宣告：本文為博主原創文章，轉載請附上博文連結！