Vue-cli專案結構講解

1、專案結構

       vue-cli腳手架工具就是為我們搭建了開發所需要的環境，為我們省去了很多精力。有必要對這個環境進行熟悉，我們就從專案的結構講起。

       注意：由於版本實時更新和你選擇安裝的不同（這裡列出的是模板為webpack的目錄結構），所以你看到的有可能和下邊的有所差別。

.
|-- 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、專案結構分析

2.1、package.json檔案

       該檔案是專案根目錄下的一個檔案，定義該專案開發所需要的各種模組以及一些專案配置資訊（如專案名稱、版本、描述、作者等）。

       package.json 裡的scripts欄位，這個欄位定義了你可以用npm執行的命令。在開發環境下，在命令列工具中執行npm run dev 就相當於執行 node build/dev-server.js .也就是開啟了一個node寫的開發行建議伺服器。由此可以看出script欄位是用來指定npm相關命令的縮寫。

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  }

dependencies欄位和devDependencies欄位：

    dependencies欄位指專案執行時所依賴的模組；
    devDependencies欄位指定了專案開發時所依賴的模組；

       在命令列中執行npm install命令，會自動安裝dependencies和devDempendencies欄位中的模組。package.json還有很多相關配置，如果你想全面瞭解，可以專門去百度學習一下。

2.2、.babelrc檔案

       Babel直譯器的配置檔案，存放在根目錄下。Babel是一個轉碼器，專案裡需要用它將ES6程式碼轉為ES5程式碼。如果你想了解更多，可以檢視babel的知識。

{
  //設定轉碼規則
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  //轉碼用的外掛
  "plugins": ["transform-runtime"],
  "comments": false,
  //對BABEL_ENV或者NODE_ENV指定的不同的環境變數，進行不同的編譯操作
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

2.3、.editorconfig檔案

       該檔案定義專案的編碼規範，編譯器的行為會與.editorconfig檔案中定義的一致，並且其優先順序比編譯器自身的設定要高，這在多人合作開發專案時十分有用而且必要。

root = true
[*]    // 對所有檔案應用下面的規則
charset = utf-8                    // 編碼規則用utf-8
indent_style = space               // 縮排用空格
indent_size = 2                    // 縮排數量為2個空格
end_of_line = lf                   // 換行符格式
insert_final_newline = true        // 是否在檔案的最後插入一個空行
trim_trailing_whitespace = true    // 是否刪除行尾的空格