Vue項目啓動代碼執行流程分析

相信來看看這篇文章的童鞋,都對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/

 

轉載  https://blog.csdn.net/cxf8881/article/details/80620545

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章