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