前言：

此樣板面向大型，嚴肅的項目，並假定您對Webpack和vue-loader有些熟悉。 請務必閱讀vue-loader的常見工作流配方的文檔。

如果您只想嘗試vue-loader或者鞭打一個快速原型，請改用webpack-simple模板。

快速開始：

要使用這個模板，可以用vue-cli來支持一個項目。 建議使用npm 3+更高效的依賴關系樹：

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

項目結構：

.
├── build
 
/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要項目配置
│   └── ...
├── src/
│   ├── main.js                 # 應用入口文件
│   ├── App.vue                 # 主應用程序組件
│   ├── components/             # ui組件
│   │   └── ...
│   └── assets/                 # 模塊資源（由webpack處理）
│       └── ...
├── 
 
static/                     # 純靜態資源（直接復制）
├── test/
│   └── unit/                   # 單元測試
│   │   ├── specs/              # 測試spec文件
│   │   ├── index.js            # 測試構建條目文件
│   │   └── karma.conf.js       # 測試跑步者配置文件
│   └── e2e/                    # e2e測試
│   │   ├── specs/              # 測試spec文件
│   │   ├── custom
 
-assertions/  # e2e測試的自定義斷言
│   │   ├── runner.js           # 測試跑步腳本
│   │   └── nightwatch.conf.js  # 測試跑步者配置文件
├── .babelrc                    # babel 配置
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # editor 配置
├── index.html                  # index.html模板
└── package.json                # 構建腳本和依賴關系

下面詳細講解下這個項目解構：

build/

此目錄包含開發服務器和生產webpack構建的實際配置。 通常，您不需要觸摸這些文件，除非您要自定義Webpack加載器，在這種情況下，您應該看看build / webpack.base.conf.js。

config/index.js

這是顯示構建設置的一些最常見配置選項的主配置文件。 有關詳細信息，請參閱開發期間的API代理和後端框架集成。

src/

這是你的大部分應用程序代碼所在的位置。如何構建此目錄中的所有內容，主要取決於您; 如果您使用Vuex，您可以查閱Vuex應用程序的建議。

static/

此目錄是您不想使用Webpack進行處理的靜態資源的一個逃生艙口。 它們將直接復制到生成webpack建立資產的同一個目錄中。

有關詳細信息，請參閱處理靜態資產。

test/unit

包含單元測試相關文件。 有關詳細信息，請參閱單元測試

test/e2e

包含e2e測試相關文件。 有關詳細信息，請參閱端到端測試。

index.html

這是我們的單頁應用程序的模板index.html。 在開發和構建期間，Webpack將生成資產，並將生成的資產的URL自動註入到此模板中以呈現最終的HTML。

package.json

包含所有構建依賴項和構建命令的NPM軟件包元文件。

從零開始搭建VUE項目