在上一篇《vue+vue-router+axios+element-ui構建vue實戰項目之二（nodejs、vue-cli等環境安裝）》中，我們通過安裝 nodejs 系統環境，以及 vue-cli 腳手架工具，在執行完命令后，我們就已經將一個初始項目跑起來了。
那么這篇文章，我們就來認識下項目中的各文件夾及里面的文件，它們是什么，以及它們的作用。
話不多說，開干。
項目初始文件解讀
1 ├── node_modules # 項目依賴包文件夾 2 ├── build # 編譯配置文件，一般不用管 3 │ ├── build.js 4 │ ├── check-versions.js 5 │ ├── logo.png 6 │ ├── utils.js 7 │ ├── vue-loader.conf.js 8 │ ├── webpack.base.conf.js 9 │ ├── webpack.dev.conf.js 10 │ └── webpack.prod.conf.js 11 ├── config # 項目基本設置文件夾 12 │ ├── dev.env.js # 開發配置文件 13 │ ├── index.js # 配置主文件 14 │ └── prod.env.js # 編譯配置文件 15 ├── src # 項目源碼編寫文件 16 │ ├── App.vue # APP入口文件 17 │ ├── assets # 初始項目資源目錄，回頭刪掉 18 │ │ └── logo.png 19 │ ├── components # 組件目錄 20 │ │ └── Hello.vue # 測試組件，回頭刪除 21 │ ├── main.js # 主配置文件 22 │ └── router # 路由配置文件夾 23 │ └── index.js # 路由配置文件 24 └── static # 資源放置目錄 25 ├── index.html # 項目入口html模板 26 ├── package.json # 項目依賴包配置文件 27 ├── .babelrc # babel 配置 28 ├── .postcssrc.js # postcss 配置 29 ├── .editorconfig # editor 配置 30 └── README.md # 項目說明文檔
好，以上就是項目完整的文件目錄結構。
其實，我們開發的時候，主要就是操作 src 里面的文件，不過開發的時候，還需要我們重新整理下里面的文件。
另外 static 資源目錄，我們也需要根據放置不同的資源，在這邊構建不同的子文件夾。
配置src和static目錄
先配置 src 目錄，也可以根據自己的實際需求配置目錄：
1 ├── api // 接口調用工具文件夾 2 │ └── index.js 3 ├── components // 組件文件夾 4 │ ├── header.vue 5 │ └── footer.vue 6 ├── page // 頁面文件夾 7 │ ├── content.vue // 內容頁面 8 │ └── index.vue // 首頁列表 9 ├── router // 路由配置文件夾 10 │ └── index.js 11 ├── store // vuex狀態管理目錄 12 ├── style // scss 樣式存放目錄 13 │ └── style.scss // 主樣式文件，可以按分類創建多個文件夾 14 └── utils // 常用工具文件夾 15 │ └── index.js 16 ├── App.vue // APP入口文件 17 └── main.js // 項目配置文件
*.vue 文件，是一個自定義的文件類型，用類 HTML 語法描述一個 Vue 組件。
每個 .vue文件包含三種類型的頂級語言塊 <template>, <script> 和 <style>。
這三個部分分別代表了 html,js,css。
接下來，我們配置 static 目錄，比較簡單，適用於絕大多數項目：
1 ├── css # 放第三方的樣式文件
2 ├── font # 放字體圖標文件 3 ├── image # 放圖片文件，里面可以根據圖片種類創建文件夾 4 └── js # 放第三方的JS文件，比如datepicker
可能有人會疑惑，src 目錄里面已經包含樣式和JS，為什么還要在 static 文件里面放置呢？
因為，如果是放在 src 目錄里面，則每次打包的時候，都需要打包的。但是 static里面的文件，我們一般是不會去修改的，也沒必要 npm 安裝，直接引用就好了。
好了，本篇文章就這么多，下節就開始實戰吧！
如果文章中存在錯誤的地方，麻煩請大家在評論中指正，以免誤人子弟，謝謝！