相信來看看這篇文章的童鞋，都對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:這個是元件名，要和你引入元件時定義的名字保持一致。

當然，還有其他屬性，這個要看你專案需求了。

說的不好，還請見諒。有問題有建議的可以下方評論留言。一起交流一下