Vue入坑——vue-cli（腳手架）目錄結構認識

上一篇：搭建vue-cli腳手架

一塊兒學vue——vue學習總路線

——————————^~^我是萌萌噠分割線^~^————————————————

上一篇已經將vue-cli腳手架搭建好了，如今來認識一下腳手架裏都是些啥東西，這裏對重要的文件進行解釋

（只是簡單解釋一下，若是要深刻了解的話，本身搜一下哦）

.1、目錄結構

|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各類公共組件
|-- static                           // 靜態文件，好比一些圖片，json數據等
|   |-- data                           // 羣聊分析獲得的數據用於數據可視化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico 
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息
.

2、webpack配置

（1）、webpack.base.conf.js

是什麼：webpack的一些配置（須要深刻學習的請看webpack的教程）

3、package.json

是什麼：在根目錄下的，定義了一些模塊信息與項目配置信息。

（1）script字段

還記得咱們在上一篇裏安裝好vue-cli以後使用了一個命令來運行嗎？就是這裏的npm run dev

所以能夠知道，script就是用來寫npm命令的。

（2）dependencies與Devdependencies字段

dependencies：項目運行時所依賴的模塊

Devdependencies：項目開發時所依賴的模塊

4、.babelrc

是什麼：babel，存放在根目錄下，用來將es6轉換爲es5的轉換器

5、editorconfig

是什麼：定義了咱們編碼的規範，甚至比編譯器的規範優先級更高。這點在一個團隊的開發中體現的淋漓盡致，你們在一個團隊裏，須要遵循必定的開發規範。

6、index.html

是什麼：存在於根節點下面，裏面通常只有一個空的根節點，在mian.js裏將實例掛載在根節點下，內容由vue組件來填充。

到此，vue-cli的目錄結構重要的部分就解釋完啦，下面呢，就瞭解一下在vue-cli裏面咱們主要操做的文件src裏面的一些文件。

——————————^~^我是萌萌噠分割線^~^————————————————

                                                                                                        下一篇：vue-cli腳手架代碼詳解