可以用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軟件包元文件。

構建命令:

npm run dev

啟動Node.js本地開發服務器。 有關詳細信息，請參閱開發期間的API代理。

.用於單個文件Vue組件的Webpack + vue-loader。
.狀態保存熱重載
.狀態保存編譯錯誤覆蓋
.使用ESLint保存
.源地圖

npm run build

建立資源進行生產。 有關詳細信息，請參閱與後端框架集成。

.用UglifyJS縮小了JavaScript。

.HTML用html-minifier縮小。
.將所有組件的CSS提取到單個文件中，並用cssnano進行縮小。
.使用版本散列編輯的所有靜態資源都可以進行高效的長期緩存，並且生成index.html是自動生成的，具有適當的URL到這些生成的資產。

npm run unit

使用Karma在PhantomJS中進行單元測試。 有關詳細信息，請參閱單元測試

.在測試文件中支持ES2015 +。

.支持所有webpack加載器。
.輕松模擬註射。

npm run e2e

使用Nightwatch進行端到端測試。 有關詳細信息，請參閱端到端測試

.在多個瀏覽器中並行運行測試。

.開箱即用的一個命令：
.硒和chromedriver依賴關系自動處理。
.自動生成Selenium服務器。

Linter配置：

此樣板使用ESLint作為linter，並使用標準預設與一些小的定制。如果您對默認的linting規則不滿意，您可以選擇幾種：

1.覆蓋.eslintrc.js中的各個規則。 例如，您可以添加以下規則來強制執行分號，而不是省略它們：

// .eslintrc.js
"semi": [2, "always"]

2.在生成項目時選擇不同的ESLint預設，例如eslint-config-airbnb。

3.在生成項目並定義自己的規則時，為ESLint預設選擇“無”。 有關詳細信息，請參閱ESLint文檔。

預處理器:

此樣板為大多數流行的CSS預處理器（包括LESS，SASS，Stylus和PostCSS）預先配置了CSS提取。 要使用預處理器，您需要做的就是為其安裝適當的webpack加載器。 例如，要使用SASS：

npm install sass-loader node-sass --save-dev

請註意，您還需要安裝node-sass，因為sass-loader將其視為對等依賴關系。

在組件內部使用預處理器:

安裝完成後，您可以使用* .vue組件中的預處理器，使用<style>標簽上的lang屬性：

<style lang="scss">
/* write SASS! */
</style>

關於SASS語法的註釋:

lang =“scss”對應於CSS-superset語法（帶大括號和分號）。

lang =“sass”對應於基於縮進的語法。

PostCSS:

默認情況下，* .vue文件中的樣式通過PostCSS管道傳輸，因此您不需要使用特定的加載器。 您可以在vue塊下簡單添加要在build / webpack.base.conf.js中使用的PostCSS插件：

// build/webpack.base.conf.js
module.exports = {
  // ...
  vue: {
    postcss: [/* your plugins */]
  }
}

有關詳細信息，請參閱vue-loader‘s的相關文檔。

Standalone CSS Files:

為了確保一致的提取和處理，建議從您的根App.vue組件導入全局獨立樣式文件，例如：

<!-- App.vue -->
<style src="./styles/global.less" lang="less"></style>

請註意，您應該僅為自己為您的應用程序編寫的樣式。 對於現有的圖書館 引導或語義UI，您可以將它們放在/靜態中，並直接在index.html中引用它們。 這避免了額外的構建時間，也更適合瀏覽器緩存。 （見 Static Asset Handling）

處理靜態資產(Static Assets):

您將在項目結構中註意到，靜態資產有兩個目錄：src / assets和static /。 他們有什麽區別？

Webpacked資產:

為了回答這個問題，我們首先需要了解Webpack如何處理靜態資產。 在* .vue組件中，所有的模板和CSS都由vue-html-loader和css-loader解析來查找資源URL。 例如，在<img src =“./ logo.png”>和background：url（./ logo.png）中，“./logo.png”是相對的資產路徑，將由Webpack解析為模塊依賴關系。

因為logo.png不是JavaScript，當被視為模塊依賴關系時，我們需要使用url-loader和file-loader來處理它。 此樣板已經為您配置了這些加載程序，因此您可以免費獲得文件名指紋和條件base64內聯等功能，同時可以使用相對/模塊路徑，而不必擔心部署。

由於這些資源可能在構建過程中被內聯/復制/重命名，所以它們基本上是您的源代碼的一部分。 這就是為什麽建議將Webpack處理的靜態資產放在/ src中，沿著其他源文件。 實際上，您甚至不必將它們全部放在/ src / assets中：您可以根據使用它們的模塊/組件進行組織。 例如，您可以將每個組件放在自己的目錄中，其靜態資產就在它的旁邊。

資產解決規則:

.相對網址，例如 ./assets/logo.png將被解釋為模塊依賴關系。 它們將被基於Webpack輸出配置的自動生成的URL替換。

.非前綴網址，例如 assets / logo.png將被視為與相對URL相同，並被翻譯成./assets/logo.png。

.前綴為?的URL被視為模塊請求，類似於require（‘some-module / image.png‘）。 如果要使用Webpack的模塊解析配置，則需要使用此前綴。 例如，如果您有資產的解決別名，則需要使用<img src =“?assets / logo.png”>來確保別名符合要求。

.根相對URL，例如 /assets/logo.png根本沒有被處理。

在JavaScript中獲取資源路徑:

為了使Webpack返回正確的資源路徑，您需要使用require（‘./ relative / path / to / file.jpg‘），這將由文件加載程序處理，並返回已解析的URL。 例如：

computed: {
  background () {
    return require(‘./bgs/‘ + this.id + ‘.jpg‘)
  }
}

註意上面的例子將包括最終構建中的./bgs/下的每個圖像。 這是因為Webpack無法猜測它們在運行時將被使用，所以它包括它們。

“真實”靜態資產:

相比之下，靜態的文件根本不被Webpack處理：它們直接以相同的文件名復制到最終目的地。 您必須使用絕對路徑引用這些文件，這是通過在config.js中加入build.assetsPublicPath和build.assetsSubDirectory來確定的。

例如，使用以下默認值：

// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: ‘/‘,
    assetsSubDirectory: ‘static‘
  }
}

使用絕對URL / static / [filename]引用靜態/中的任何文件。 如果將assetSubDirectory更改為資產，則這些URL將需要更改為/ assets / [filename]。

我們將在後端集成部分中詳細了解配置文件。

環境變量:

有時根據應用程序運行的環境具有不同的配置值是很實用的。

舉個例子：

// config/prod.env.js
module.exports = {
  NODE_ENV: ‘"production"‘,
  DEBUG_MODE: false,
  API_KEY: ‘"..."‘ // this is shared between all environments
}

// config/dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: ‘"development"‘,
  DEBUG_MODE: true // this overrides the DEBUG_MODE value of prod.env
})

// config/test.env.js
module.exports = merge(devEnv, {
  NODE_ENV: ‘"testing"‘
})

註意：字符串變量需要被包裝成單引號和雙引號‘“...”‘

所以環境變量是：

• Production
  • NODE_ENV = ‘production‘,
  • DEBUG_MODE = false,
  • API_KEY = ‘...‘
• Development
  • NODE_ENV = ‘development‘,
  • DEBUG_MODE = true,
  • API_KEY = ‘...‘
• Testing
  • NODE_ENV = ‘testing‘,
  • DEBUG_MODE = true,
  • API_KEY = ‘...‘

我們可以看到，test.env繼承了dev.env，dev.env繼承了prod.env。

用法：

在代碼中使用環境變量很簡單。 例如：

Vue.config.productionTip = process.env.NODE_ENV === ‘production‘

與後端框架集成：

如果您正在構建純靜態應用程序（與後端API分開部署的應用程序），則可能甚至不需要編輯config / index.js。 但是，如果要將此模板與現有的後端框架集成，例如 Rails / Django / Laravel擁有自己的項目結構，您可以編輯config / index.js，將前端資源直接生成到後臺項目中。

我們來看看默認的config / index.js：

// config/index.js
var path = require(‘path‘)

module.exports = {
  build: {
    index: path.resolve(__dirname, ‘dist/index.html‘),
    assetsRoot: path.resolve(__dirname, ‘dist‘),
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    productionSourceMap: true
  },
  dev: {
    port: 8080,
    proxyTable: {}
  }
}

在構建部分中，我們有以下選項：

build.index

必須是本地文件系統上的絕對路徑。

如果您使用帶有後端框架的此模板，則可以相應地編輯index.html，並將此路徑指向由您的後端應用程序呈現的視圖文件，例如。 Rails應用的app / views / layouts / application.html.erb或Laravel應用程序的resources / views / index.blade.php。

build.assetsRoot

必須是本地文件系統上的絕對路徑。

這應該指向包含應用程序的所有靜態資源的根目錄。 例如，公開/為Rails / Laravel。

build.assetsSubDirectory

在build.assetsRoot中的此目錄下嵌入webpack生成的資源，以便它們與build.assetsRoot中可能具有的其他文件不混合。 例如，如果build.assetsRoot是/ path / to / dist，並且build.assetsSubDirectory是靜態的，則所有Webpack資源都將以path / to / dist / static生成。

此目錄將在每次構建之前進行清理，因此只應包含生成生成的資源。

靜態中的文件將在構建期間按原樣復制到該目錄中。 這意味著如果您更改此前綴，則所有絕對URL引用static /中的文件也將需要更改。 有關詳細信息，請參閱 Handling Static Assets。

build.assetsPublicPath

這應該是您的build.assetsRoot將通過HTTP提供的URL路徑。 在大多數情況下，這將是根（/）。 只有當您的後端框架提供具有路徑前綴的靜態資產時，才能更改此選項。 在內部，這是作為output.publicPath傳遞給Webpack。

build.productionSourceMap

是否生成源地圖進行生產構建。

dev.port

指定要監聽的服務器的端口。

dev.proxyTable

定義開發人員服務器的代理規則。 有關詳細信息，請參閱 API Proxying During Development。

開發期間的API代理：

當將此樣板與現有後端集成時，通常需要在使用dev服務器時訪問後端API。 為了實現這一點，我們可以並行（或遠程）運行dev服務器和API後端，並讓dev服務器將所有API請求代理到實際的後端。

要配置代理規則，請在config / index.js中編輯dev.proxyTable選項。 dev服務器正在使用http代理中間件進行代理，因此您應參考其文檔以獲取詳細的用法。 但這是一個簡單的例子：

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      ‘/api‘: {
        target: ‘http://jsonplaceholder.typicode.com‘,
        changeOrigin: true,
        pathRewrite: {
          ‘^/api‘: ‘‘
        }
      }
    }
  }
}

以上示例將代理請求/ api / posts / 1 到 http://jsonplaceholder.typicode.com/posts/1.

網址匹配：

除了靜態網址之外，您還可以使用glob模式來匹配網址，例如/ API/ **。 有關詳細信息，請參閱上下文匹配。 此外，您可以提供一個過濾器選項，該選項可以是自定義函數，用於確定請求是否應被代理：

proxyTable: {
  ‘**‘: {
    target: ‘http://jsonplaceholder.typicode.com‘,
    filter: function (pathname, req) {
      return pathname.match(‘^/api‘) && req.method === ‘GET‘
    }
  }
}

單元測試：

本樣板用於單元測試的工具概述：

.Karma：啟動瀏覽器的測試運行器，運行測試並將結果報告給我們。

.karma-webpack：使用Webpack捆綁我們的測試的Karma插件。

.摩卡：我們編寫測試規範的測試框架。
.Chai：提供更好的斷言語法的測試斷言庫。
.Sinon：提供間諜，存根和模擬的測試實用程序庫。

Chai和Sinon是使用karma-sinon-chai進行集成的，所以所有Chai接口（應該是，期望，斷言）和sinon都可以在測試文件中全球使用。

和文件：

index.js

這是由karma-webpack用於捆綁所有測試代碼和源代碼（為了覆蓋目的））的條目文件。 你可以忽略它大部分。

specs/

該目錄是您編寫實際測試的地方。 您可以在測試中使用完整的ES2015 +和所有受支持的Webpack加載器。

karma.conf.js

這是Karma配置文件。 有關詳細信息，請參閱Karma docs 。

在更多瀏覽器中運行測試

您可以在多個真正的瀏覽器中運行測試，方法是在test / unit / karma.conf.js中安裝更多的業務發射器並調整瀏覽器字段。

模擬依賴

默認情況下，此樣板安裝了註入裝載機。 有關* .vue組件的使用，請參閱vue-loader文檔進行測試。

端到端測試：

此樣板使用Nightwatch.js進行e2e測試。 Nightwatch.js是一個高度集成的e2e測試賽跑者，構建在硒上。 這個樣板附帶了Selenium服務器和Chromedriver二進制文件，為您預配置，所以你不必搞砸自己。

我們來看看test / e2e目錄中的文件：

runner.js

啟動開發服務器的Node.js腳本，然後啟動Nightwatch以對其執行測試。 這是運行npm運行e2e時運行的腳本。

nightwatch.conf.js

夜視配置文件。 有關詳細信息，請參閱Nightwatch的配置文檔。

custom-assertions/

可以在夜視測試中使用的自定義斷言。 有關詳細信息，請參閱Nightwatch的文檔編寫自定義聲明。

specs/

你的實際測試！ 有關詳細信息，請參閱Nightwatch的文檔測試和API參考。

在更多瀏覽器中運行測試

要配置哪些瀏覽器運行測試，請在test / e2e / nightwatch.conf.js中的“test_settings”下添加一個條目，以及test / e2e / runner.js中的--env標誌。 如果您希望在諸如SauceLabs之類的服務上配置遠程測試，您可以根據環境變量使Nightwatch配置有條件，或者完全使用單獨的配置文件。 有關更多詳細信息，請參閱Nightwatch在Selenium上的文檔。

預售SEO

如果您希望預先投放一旦推送到生產時不會顯著更改的路線，請使用此Webpack插件：prerender-spa-plugin，它已經過Vue測試。 對於頻繁更改的頁面，Prerender.io和Netlify都提供定期重新預覽您的搜索引擎內容的計劃。

使用prerender-spa-plugin

將其安裝為開發人員依賴關系：

npm install --save-dev prerender-spa-plugin

需要在build / webpack.prod.conf.js中：

// 該行應該位於其他“進口”生活的文件的頂部
var PrerenderSpaPlugin = require(‘prerender-spa-plugin‘)

在plugins數組中（也在build / webpack.prod.conf.js中）進行配置：

new PrerenderSpaPlugin(
  // Path to compiled app
  path.join(__dirname, ‘../dist‘),
  // List of endpoints you wish to prerender
  [ ‘/‘ ]
)

如果您還想預先投射/關於和/接觸，那麽該數組將是[‘/‘，‘/ about‘，‘/ contact‘]。

啟用vue-router的歷史記錄模式：

const router = new VueRouter({
mode: ‘history‘,
routes: [...]
})

詳解-vue項目中的文件和目錄