相信來看看這篇文章的童鞋,都對Vue已經有了大致的瞭解。所以,話不多說,直接進入正題。
首先看下圖:
一般一個初步的Vue項目創建好之後都會有這三個文件:index.html 、main.js 、App.js;
1、index.html :衆做周知,Vue是單頁面形式開發,而這個index.html文件在其中起着特別重要的作用。所有組件(後綴名爲.vue都被視爲組件)都會通過此文件進行渲染加載。
這個文件,你可以不用管。一般情況下,很少會在這裏面進行大量的代碼二次編寫。
2、main.js : 這個文件,在我看來,它相當於一個C/Java中的入口函數。控制着初次啓動Vue項目要加載的組件。
下面是main.js的代碼截圖,我會對每行代碼進行逐一分析
(1)import A from ‘B’
這類語句相當於引入B(這一般是路徑)然後給它起個名字叫做A;
(2)Vue.user(C)
這個意思是 全局方法定義 C。也就是說,定義以後,你可以在這個Vue項目的任意地方使用該組件(當然,你不能亂寫)。
(3)
這個和index.html中的相掛鉤。
官網解釋爲:模板將會替換掛載的元素。掛載元素的內容都將被忽略
也就是說:template: '<App/>' 表示用<app></app>替換index.html裏面的<div id="app"></div>,然後index.html文件被初步解析爲這種形式
<div id="myapp">
<app></app>
</div>
(4)watch : 用來監聽路由的變化,可以用來定義頁面切換時過渡效果。
3、App.vue:組件。額,暫且,你可以把它認爲是一個根組件。
export中的name屬性,相當於給這個組件定義一個名字。便於識別和使用。
created: 這是一個生命週期函數,因爲App這個組件中並沒有任何信息。他只是作爲根組件來使用。所以,我們要在進入這個組件的時候跳轉到一個初始化界面--login。
(個人感覺App沒啥用,index.html和main.js完全可以實現這些功能)。
下面,我們來總結一下,vue項目的啓動,在表層可視爲main.js-->App.vue(組件)-->index.html
最後,順便提下src/router/index.js這個文件。
對於裏面一些代碼我來簡單介紹一下。
1、引入組件的代碼。
引入的時候注意好格式、路徑就行。
2、routes定義時。
path爲你以後頁面間路由跳轉的路徑;
name亦可以作爲條狀的依據
component:這個是組件名,要和你引入組件時定義的名字保持一致。
當然,還有其他屬性,這個要看你項目需求了。
這個是官網的Vue-Router介紹 https://router.vuejs.org/zh/guide/