相信來(lái)看看這篇文章的童鞋，都對(duì)Vue已經(jīng)有了大致的了解。所以，話不多說(shuō)，直接進(jìn)入正題。

首先看下圖：

一般一個(gè)初步的Vue項(xiàng)目創(chuàng)建好之后都會(huì)有這三個(gè)文件：index.html 、main.js 、App.js;

1、index.html :眾做周知，Vue是單頁(yè)面形式開(kāi)發(fā)，而這個(gè)index.html文件在其中起著特別重要的作用。所有組件（后綴名為.vue都被視為組件）都會(huì)通過(guò)此文件進(jìn)行渲染加載。

這個(gè)文件，你可以不用管。一般情況下，很少會(huì)在這里面進(jìn)行大量的代碼二次編寫(xiě)。

2、main.js : 這個(gè)文件，在我看來(lái)，它相當(dāng)于一個(gè)C/Java中的入口函數(shù)?？刂浦醮螁?dòng)Vue項(xiàng)目要加載的組件。

下面是main.js的代碼截圖，我會(huì)對(duì)每行代碼進(jìn)行逐一分析

  （1）import  A   from  'B’
   這類語(yǔ)句相當(dāng)于引入B（這一般是路徑）然后給它起個(gè)名字叫做A；

（2）Vue.user(C)
這個(gè)意思是 全局方法定義 C。也就是說(shuō)，定義以后，你可以在這個(gè)Vue項(xiàng)目的任意地方使用該組件（當(dāng)然，你不能亂寫(xiě)）。

（3）

這個(gè)和index.html中的相掛鉤。

官網(wǎng)解釋為：模板將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略

也就是說(shuō):template: '<App/>' 表示用<app></app>替換index.html里面的<div id="app"></div>，然后index.html文件被初步解析為這種形式

<div id="myapp">
    <app></app>
</div>

（4）watch ： 用來(lái)監(jiān)聽(tīng)路由的變化，可以用來(lái)定義頁(yè)面切換時(shí)過(guò)渡效果。

3、App.vue：組件。額，暫且，你可以把它認(rèn)為是一個(gè)根組件。

export中的name屬性，相當(dāng)于給這個(gè)組件定義一個(gè)名字。便于識(shí)別和使用。

created: 這是一個(gè)生命周期函數(shù)，因?yàn)锳pp這個(gè)組件中并沒(méi)有任何信息。他只是作為根組件來(lái)使用。所以，我們要在進(jìn)入這個(gè)組件的時(shí)候跳轉(zhuǎn)到一個(gè)初始化界面--login。

（個(gè)人感覺(jué)App沒(méi)啥用，index.html和main.js完全可以實(shí)現(xiàn)這些功能）。

   下面，我們來(lái)總結(jié)一下，vue項(xiàng)目的啟動(dòng)，在表層可視為main.js-->App.vue（組件）-->index.html

最后，順便提下src/router/index.js這個(gè)文件。

對(duì)于里面一些代碼我來(lái)簡(jiǎn)單介紹一下。

1、引入組件的代碼。

引入的時(shí)候注意好格式、路徑就行。

2、routes定義時(shí)。

path為你以后頁(yè)面間路由跳轉(zhuǎn)的路徑；

name亦可以作為條狀的依據(jù)

component:這個(gè)是組件名，要和你引入組件時(shí)定義的名字保持一致。

當(dāng)然，還有其他屬性，這個(gè)要看你項(xiàng)目需求了。

這個(gè)是官網(wǎng)的Vue-Router介紹 https://router./zh/guide/

轉(zhuǎn)載  https://blog.csdn.net/cxf8881/article/details/80620545