Webpack下的Vuejs專案檔案結構

根據前面章節，我們安裝了 webpack, vue-cli, 並執行成功，看到了Vuejs的第一個頁面。

那麼首先，我們需要對Webpack 下的Vuejs有個全面的瞭解。

在我們執行了命令後，

$ vue init webpack my-project

會生成一個嶄新的專案。 它的檔案結構如下：

▸ build/                // 編譯用到的指令碼
▸ config/               // 各種配置
▸ dist/                 // 打包後的資料夾
▸ node_modules/         // node第三方包
▸ src/                  // 原始碼
▸ static/               // 靜態檔案, 暫時無用
  index.html            // 最外層檔案
  package.json          // node專案配置檔案

下面我們針對重要的檔案和資料夾來依次說明.

build 資料夾

這個資料夾中，保留了各種打包指令碼。 是不可或缺的，不要隨意修改。

展開後如下：

▾ build/
    build.js
    check-versions.js
    dev-client.js
    dev-server.js
    utils.js
    vue-loader.conf.js
    webpack.base.conf.js
    webpack.dev.conf.js
    webpack.prod.conf.js

• build.js:

打包使用，不要修改。

• check-versions.js:

檢查npm的版本， 不要修改。

• dev-client.js 和 dev-server.js:

是在開發時使用的伺服器指令碼。不要修改。（藉助於node這個後端語言，我們在做vuejs開發時，可以通過 $npm run dev這個命令，開啟一個小的server, 執行vuejs. )

• utils.js

不要修改。 做一些css/sass 等檔案的生成。

• vue-loader.conf.js

非常重要的配置檔案，不要修改。 內容是用來輔助載入vuejs用到的css source map等內容。

• webpack.base.conf.js
• webpack.dev.conf.js
• webpack.prod.conf.js

這三個都是基本的配置檔案。不要修改。

config 資料夾

跟部署和配置相關。

▾ config/
    dev.env.js
    index.js
    prod.env.js

• dev.env.js

開發模式下的配置檔案，一般不用修改。

• prod.env.js

生產模式下的配置檔案，一般不用修改。

• index.js

很重要的檔案， 定義了:

• 開發時的埠（預設是8080），
• 圖片資料夾（預設static)，
• 開發模式下的 代理伺服器. 我們修改的還是比較多的。

對於這個資料夾的內容，我們會在後續的章節中陸續進行解釋（例如對於某個頁面的渲染過程，如何做代理轉發)

dist 資料夾

打包之後的檔案所在目錄，如下。

▾ dist/
  ▾ static/
    ▾ css/
        app.d41d8cd98f00b204e9800998ecf8427e.css
        app.d41d8cd98f00b204e9800998ecf8427e.css.map
    ▾ js/
        app.c482246388114c3b9cf0.js
        app.c482246388114c3b9cf0.js.map
        manifest.577e472792d533aaaf04.js
        manifest.577e472792d533aaaf04.js.map
        vendor.5f34d51c868c93d3fb31.js
        vendor.5f34d51c868c93d3fb31.js.map
    index.html

可以看到，對應的css, js, map, 都在這裡。

請大家注意 檔名中的無意義的字串，這個是隨機生成的。 目的是為了讓檔名發生變化 ，方便我們的部署，也方便Nginx伺服器重新對該檔案做快取。

• app.css : 編譯後 的CSS 檔案
• app.js : 最核心的js 檔案. 幾乎所有的程式碼邏輯都會打包到這裡。
• manifest.js ： 生成的周邊js 檔案
• vendor.js ： 生成的vendor.js 檔案

另外，每個 .map 檔案都非常重要。 可以簡單的認為，有了 .map 檔案，我們的瀏覽器就可以先下載整個的.js 檔案，然後在後續的操作中“部分載入” 對應的檔案。

切記： 這個資料夾不要放到git中。 因為每次編譯之後，這裡的檔案都會發生變化。

node_modules 資料夾

node專案所用到的第三方包，特別多，特別大。 $ npm install 所產生。 所有在 package.json 中定義的第三方包都會出現在這裡。

package.json :

  // ...
  "dependencies": {
    "vue": "^2.3.3",
    "vue-resource": "1.3.3",
    "vue-router": "^2.3.1",
    "vuex": "^2.3.1"
  },
  "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    //...
  }
  // ...

node_modules 資料夾裡面往往會有幾百個資料夾，看起來如下：

這個資料夾不要放到git中。

src 資料夾

最最核心的原始碼所在的目錄。 展開後如下所示（不同版本的vue-cli生成的目錄會稍有不同，不過核心都是一樣的）：

▾ src/
  ▾ assets/
      logo.png
  ▾ components/
      Book.vue
      BookList.vue
      Hello.vue
  ▾ router/
      index.js
    App.vue
    main.js

• assets 資料夾

用到的圖片都可以放在這裡。

• components

用到的"檢視"和"元件"所在的資料夾。（最最核心）

• router/index.js

路由檔案。 定義了各個頁面對應的url.

• App.vue

如果index.html 是一級頁面模板的話，這個App.vue就是二級頁面模板。
所有的其他vuejs頁面，都作為該模板的 一部分被渲染出來。

• main.js

沒有實際的業務邏輯，但是為了支撐整個vuejs框架，存在很必要。