1. 程式人生 > >vue-cli筆記

vue-cli筆記

vue-cli筆記
1、main.js 程式入口檔案,是初始化vue例項並使用需要的外掛,載入各種公共元件.

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

其實最完整的寫法分別是:
import Vue from "../node_modules/vue/dist/vue.js";
import App from './App.vue';
簡寫說明:
a.import...from...的from命令後面可以跟很多路徑格式,若只給出vue,axios這樣的包名,則會自動到 node_modules中載入;若給出相對路徑及檔案字首,則到指定位置尋找。
    b.可以載入各種各樣的檔案:.js、.vue、.less等等。
    c.可以省略掉from直接引入。
vue-cli筆記


這裡new Vue代表新建vue物件
el官方解釋:為例項提供掛載元素。值可以是 CSS 選擇符,或實際 HTML 元素,或返回 HTML 元素的函式。
這裡就通過index.html中的<div id="app"><div>中的id=“app”和這裡的“#app”進行掛載。
components:代表元件。這裡的App,實際是App:App的省略寫法,template裡使用的 <App/>標籤來自元件App.vue。
template:代表模板。官方解釋:模板將會替換掛載的元素。掛載元素的內容都將被忽略。
也就是說:template: '<App/>' 表示用<app></app>替換index.html裡面的<div id="app"></div>
總結
:main.js中的根例項會掛載到index.html中的<div id="app">,且用template替換,即替換為<App></App>. 由於根例項註冊了App元件,所以這標籤就是App.vue元件。由於App.vue中含有<router-view/>,所以路由匹配成功的頁面都在這裡進行渲染和切換。

2、App.vue
App.vue是我們的主元件,頁面入口檔案,所有頁面都是在App.vue下進行切換的。也是整個專案的關鍵,app.vue負責構建定義及頁面元件歸集。
可以理解所有的路由也是App.vue的子元件,所以我將router標示為App.vue的子元件。
vue-cli筆記


router-view:用來渲染匹配到的路由的
這裡,App.vue裡面有<router-view/>
在main.js裡面,定義了路由path:'/',匹配了HelloWorld元件,所以在預設首頁,<router-view/>就渲染了HelloWorld元件裡面的內容