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。后續會詳細說明，因為我也是才學好多東西不懂，囧。

 

 

 

以上這些只是為了學習做的總結，有部分摘自大牛原話，本人只是為了學習方便做的筆記，如有侵權，聯系必刪，致敬大牛！