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

首先看下圖：

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

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

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

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

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

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

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

（3）

這個和index.html中的相掛鉤。

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

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

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

（4）watch ： 用來監(jiān)聽路由的變化，可以用來定義頁面切換時過渡效果。

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

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

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

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

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

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

對于里面一些代碼我來簡單介紹一下。

1、引入組件的代碼。

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

2、routes定義時。

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

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

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

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

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

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