最近在學習vue，看的稀裡糊塗。今天從頭開始，把cli配置的vue專案目錄和配置檔案搞清楚。

先看看整個專案目錄結構：

再看看build資料夾下相關檔案及目錄：

config資料夾下目錄和檔案：

接下來說說vue-cli專案中頁面相關的主要檔案

首先是index.html:

說明：一般只定義一個空的根節點，在main.js裡面定義的例項將掛載在#app節點下，內容通過vue元件填充。

App.vue檔案：

說明：app.vue是專案的主元件，所有頁面都是在app.vue下切換的。一個標準的vue檔案，分為三部分。

第一裝寫html程式碼在中，一般在此下面只能定義一個根節點；

第二標籤；

第三用來寫樣式，其中scoped表示。該style作用於只在當前元件的節點及其子節點，但是不包含子元件呦。

是子路由檢視，後面的路由頁面都顯示在此處，相當於一個指示標，指引顯示哪個頁面。

main.js:

說明：入口檔案來著，主要作用是初始化vue例項並使用需要的外掛。比如下面引用了4個外掛，但只用了app（components裡面是引用的外掛）。

router下面的index.js檔案：路由配置檔案。

說明：定義了三個路由，分別是路徑為/，路徑為/msg，路徑為/detail。後續會詳細說明，因為我也是才學好多東西不懂，囧。

本文轉自https://www.cnblogs.com/hongdiandian/p/8311645.html，非常感謝，便於學習放到自己的部落格了。