vue-cli筆記

1、main.js 程序入口文件，是初始化vue實(shí)例并使用需要的插件,加載各種公共組件.

import Vue from 'vue'
import App from './App'
import router from './router'

其實(shí)最完整的寫法分別是：
import Vue from "../node_modules/vue/dist/vue.js";
import App from './App.vue';
簡(jiǎn)寫說明：
a.import...from...的from命令后面可以跟很多路徑格式，若只給出vue，axios這樣的包名，則會(huì)自動(dòng)到 node_modules中加載；若給出相對(duì)路徑及文件前綴，則到指定位置尋找。
　　　　b.可以加載各種各樣的文件：.js、.vue、.less等等。
　　　　c.可以省略掉from直接引入。

這里new Vue代表新建vue對(duì)象
el官方解釋：為實(shí)例提供掛載元素。值可以是 CSS 選擇符，或?qū)嶋H HTML 元素，或返回 HTML 元素的函數(shù)。
這里就通過index.html中的<div id="app"><div>中的id=“app”和這里的“#app”進(jìn)行掛載。
components:代表組件。這里的App，實(shí)際是App:App的省略寫法，template里使用的 <App/>標(biāo)簽來自組件App.vue。
template：代表模板。官方解釋：模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略。
也就是說:template: '<App/>' 表示用<app></app>替換index.html里面的<div id="app"></div>
總結(jié)：main.js中的根實(shí)例會(huì)掛載到index.html中的<div id="app">，且用template替換，即替換為<App></App>. 由于根實(shí)例注冊(cè)了App組件，所以這標(biāo)簽就是App.vue組件。由于App.vue中含有<router-view/>，所以路由匹配成功的頁(yè)面都在這里進(jìn)行渲染和切換。

2、App.vue
App.vue是我們的主組件，頁(yè)面入口文件，所有頁(yè)面都是在App.vue下進(jìn)行切換的。也是整個(gè)項(xiàng)目的關(guān)鍵，app.vue負(fù)責(zé)構(gòu)建定義及頁(yè)面組件歸集。
可以理解所有的路由也是App.vue的子組件，所以我將router標(biāo)示為App.vue的子組件。

router-view：用來渲染匹配到的路由的
這里，App.vue里面有<router-view/>
在main.js里面，定義了路由path:'/'，匹配了HelloWorld組件，所以在默認(rèn)首頁(yè)，<router-view/>就渲染了HelloWorld組件里面的內(nèi)容