vue-cli腳手架目錄一覽

最近在學習vue，看的稀裏糊塗。今天從頭開始，把cli配置的vue項目目錄和配置文件搞清楚。

先看看整個項目目錄結構：

 

再看看build文件夾下相關文件及目錄：

 

config文件夾下目錄和文件：

接下來講說vue-cli項目中頁面相關的主要文件^o^

首先是index.html:

說明：通常只定義一個空的根節點，在main.js裏面定義的實例將掛載在#app節點下，內容經過vue組件填充。

 

 

 

App.vue文件：

說明：app.vue是項目的主組件，全部頁面都是在app.vue下切換的。一個標準的vue文件，分爲三部分。

第一裝寫html代碼在<template></template>中，通常在此下面只能定義一個根節點；

第二<script></script>標籤；

第三<style scoped></style>用來寫樣式，其中scoped表示。該style做用於只在當前組件的節點及其子節點，可是不包含子組件呦。

<router-view></router-view>是子路由視圖，後面的路由頁面都顯示在此處，至關於一個指示標，指引顯示哪一個頁面。

 

main.js:

說明：入口文件來着，主要做用是初始化vue實例並使用須要的插件。好比下面引用了4個插件，但只用了app（components裏面是引用的插件）。

 

router下面的index.js文件：路由配置文件。

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

 

下一篇會繼續詳解build文件夾、config文件夾以及package.json等配置相關的文件。