懵逼，竟然沒有中文版。自己對英文不敏感，看一遍記錄下來，備用。

介紹

這個模板是針對大型應用，預設你已經熟悉Webpack和vue-loader。確定已經讀過vue-loader文件去面對一般的工作流程。

快速開始

為了使用這個模板，需要使用vue-cli腳手架。推薦使用npm3+

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

專案結構

.
├── build/                      # webpack config files(webpack配置檔案)
│   └── ...
├── config/
│   ├── index.js                # main project config（主要配置檔案）
│   └── ...
├── src/
│   ├── main.js                 # app entry file（入口）
│   ├── App.vue                 # main app component（元件入口）
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)（需要預處理的靜態資源）
│       └── ...
├── static/                     # pure static assets (directly copied)（純靜態資源）
├── test/(測試先不看了)
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── eslintrc            # config file for eslint with extra settings only for unit tests
│   │   ├── index.js            # test build entry file
│   │   ├── jest.conf.js        # Config file when using Jest for unit tests
│   │   └── karma.conf.js       # test runner config file when using Karma for unit tests
│   │   ├── setup.js            # file that runs before Jest runs your unit tests
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config（es6適配）
├── .editorconfig               # indentation, spaces/tabs and similar settings for your editor
├── .eslintrc.js                # eslint config
├── .eslintignore               # eslint ignore rules
├── .gitignore                  # sensible defaults for gitignore
├── .postcssrc.js               # postcss config
├── index.html                  # index.html template
├── package.json                # build scripts and dependencies
└── README.md                   # Default README file

build/
這個目錄包含生產和開發環境下的webpack構建配置。通常情況下你不需要接觸這些檔案，除非你想自定義webpack構建。在這種情況下，你需要去瀏覽build/webpack.base.conf.js
config/index.js
這個是一個暴露了在在build過程中大部分配置選項的配置檔案。See API Proxying During Development and Integrating with Backend Framework for more details.
src/
專案程式碼目錄。如果使用了Vuex可以參考recommendations for Vuex applications.
static/
不需要預處理的靜態資原始檔
See Handling Static Assets for more details.
test/unit
測試檔案
See Unit Testing for more details.
test/e2e
e2e測試檔案
See End-to-end Testing for more details.
index.html
這個單頁面模板。在開發和構建中。webpack 最後生成的資源的都在注入到這個模板。生成最後的html
package.json
包含依賴的npm包檔案和build指令

Build 指令

所有執行都是NPM指令碼執行
npm run dev
開啟node.js本地伺服器

• 單頁面元件需要的webpack + vue-loader
• 熱載入（修改檔案，無需重啟伺服器）
• 編譯覆蓋
• ESlint
• 原檔案對映
  npm run build
  為生產構建資原始檔
• js壓縮（ UglifyJS v3.）
• html壓縮html-minifier.
• 所有元件中的css檔案被提取到一個檔案中，壓縮cssnano.
• 為了長期快取素有的靜態資源都被編譯帶有版本雜湊。生產模式下的index.html會自動生成url為這些資源
  npm run unit
  利用Jest在JSDOM中進行單元測試
• 支援es6
• 容易mocking
  npm run e2e
  利用nightWatch進行e2e測試。
• 在多個瀏覽器進行並行測試
• 開箱即用的命令
  • Selenium and chromedriver dependencies自動處理
  • 自動生成Selenium伺服器。
    npm run lint
    執行eslint

Babel 配置

這個模板使用了babel-preset-env來配置babel，更多資訊參考http://2ality.com/2017/02/babel-preset-env.html.
一個預選設定的Babel可以自動將es6降級為es5,根據目標瀏覽器或者執行環境
使用browserslist
去壓縮這些資訊所以我們可以使用valid query format supported by browserslist.
然後這裡有個警告，browserslist推薦定義目標檔案類似package.json或者. browserslistrc配置檔案。這樣允許一些工具，類似 autoprefixer and eslint-plugin-compat 去分享這些配置，在這個模板中browserslist配置在package.json:

{
  "...": "...",
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

但在最新的babel-preset-envv1.6.1穩定發行版中。沒有支援載入配置檔案從package.json，所以配置環境重複在.babelrc.如果你希望改變你的目標環境，請確定更新了package.json和. babelrc。這個問題已經在測試版修正。模板會在正式版出來更新。

Linter配置

這個模板利用ESLinter作為linter,使用標準的預設和一些自定義操作。
如果你不喜歡這些預定的規則，你有已下幾種選擇。
1。在.eslintrc.js中重寫linter規則。例如你可以強制使用分號而不是忽略他們：

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

2. 當生成專案的時候，選擇一個不同的預設。例如eslint-config-airbnb.
   3 當生成專案定義自己的規則的時候，對於ESLinter選擇none。更多細節See ESLint documentation for more details.

修正Linter錯誤

你可以使用以下命令去修復錯誤（不能修復所有的錯誤）

npm run lint -- --fix

在中間的--是有必要的確定--fix是傳給lint 而不是npm的
該模板為大多數CSS前處理器預先配置了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超集語法（帶花括號和分號）。
lang =“sass”對應於基於縮排的語法。

PostCss

• .vue檔案和樣式檔案（* .css，* .scss等）中的樣式預設被PostCss輸出。你不要使用特定的載入器
  你可以簡單的增加PostCss外掛，通過在根目錄新增.postcssrc.js

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    // to edit target browsers: use "browserslist" field in package.json
    "postcss-import": {},
    "autoprefixer": {}
  }
}

See vue-loader's related documentation for more details.

獨立的CSS檔案

為了確保提取和處理的一致性。推薦你匯入全域性，獨立的樣式在App.vue元件中。例如

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

在程式中你應該只對自己寫的樣式這樣操作。對於已經存在的庫 e.g. Bootstrap or Semantic UI你可以放在index.html並且引入他們。這樣避免構建時間和瀏覽器快取

處理靜態Assets

你應該在注意到在專案結構總有2個靜態資原始檔夾src/assets和static/.區別是什麼呢？

Webpacked Assets

為了回答這個問題，我們要知道Webpack如何處理這些assets,在*.vue的元件中。你的所有模板和css樣式都被vue-html-loader and css-loader解析以查詢資源urls。
舉例<img src="./logo.png"> and background: url(./logo.png), "./logo.png"是相對資源路徑會被webpack作為模組依賴性解決。

因為logo.png不是js,當作為模組依賴性對待的時候，我們需要使用url-loader and file-loader去處理。這個模板，已經配置了這些loaders。你可以免費獲得如filename fingerprinting和 base64內聯功能，當你使用相對路徑的時候不用考慮部署問題。

由於這些資產可能在構建過程中被內聯/複製/重新命名，因此它們基本上是原始碼的一部分。這就是為什麼建議將Webpack處理的靜態資源放置在/ src中以及其他原始檔的原因。 實際上，你甚至不必將它們全部放在/ src / assets中：您可以使用它們根據模組/元件組織它們。 例如，您可以將每個元件放在其自己的目錄中，其靜態assets就位於其旁邊。

Asset 解析規則

1 urls 相對路徑：類似./assets/logo.png會被解釋成模組依賴，會被替換成由webpack基於你輸出配置的自動生成的url路徑
2 沒有字首的urls 類似assets/logo.png等同於./assets/logo.png
3 帶有~字首的urls : 會被作為一個模組請求，類似require('some-module/image.png')，如果你想利用Webpack模組解析配置，你需要使用這個字首
4 根目錄相對路徑。 不會被處理

在js中獲取Asset路徑

為了在webpack中返回正確的路徑，你需要使用require('./relative/path/to/file.jpg')
，這會被file-loader處理並且返回解析後的路徑 例如：

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

註釋： 例子中的圖片在最後的build中都會在./bgs/。因為webpack無法猜測在執行是什麼時候時候使用到。

真正靜態資源

作為對比，在static/不會被webapck處理.他們會被直接複製並且相同的檔名。你必須使用他們用絕對路徑。這個絕對路徑是這是通過在config.js中加入build.assetsPublicPath和build.assetsSubDirectory來確定的

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

所有放在static/檔案加下面的檔案必須使用絕對路徑static/filename。如果你改變了assetSubDirectory為asset。路徑變為asset/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 ,dev繼承prod.env

使用

最簡單的使用方法

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

於後端框架整合

如果你構建的是純靜態介面（沒有埠api互動的），你就不需要編輯config/index.js.
然而你像整合這個模板到現有的後端框架中。你需要編輯config/index.js直接生成前段資源給後端。
預設的config/index.js

// config/index.js
'use strict'
const path = require('path')

module.exports = {
  dev: {
    / Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost',
    port: 8080, 

    // skipping other options as they are only convenience features
  },
  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    productionSourceMap: true,

    // skipping the rest ...
  },
}

在build的括號中，有這幾個選項。
build.index

必須是當地檔案系統中的絕對路徑

這個是index.html自動生成的
你可以相應地編輯index.html並將此路徑指向您的後端應用程式呈現的檢視檔案，
app/views/layouts/application.html.erb for a Rails app, or resources/views/index.blade.php for a Laravel app.

build.assetsRoot

也必須是絕對路徑

必須指向包含靜態資源的根目錄
For example, public/ for both Rails/Laravel.
build.assetsSubDirectory
webpack生成器巢狀在build.assetsRoot資料夾中，其他檔案不應該混合在一起。舉個例子，如果build.assetsRoot是/path/to/dist.build.assetsSubDirectory是static。那麼webpack 生成的資源就會在path/to/dist/static資料夾下。

這個目錄會在每次build的時候清除。所以他應該只包含build生成的資原始檔。

在/static中的檔案都在會構建時，拷貝到該目錄。這意思是如果你改變了這個字首所有在/static中絕對路徑的URLs都需要改變。

build.assetsPublicPath
這應該是你的build.assetsRoot將通過HTTP提供的URL路徑。 在大多數情況下，這將是根（/）。 只有在後端框架為路徑字首提供靜態資產時才更改此設定。 在內部，這作為output.publicPath傳遞給Webpack。

build.productionSourceMap
是否在生產模式下生成資源對映

dev.port
指定開發埠號

dev.proxyTable
定義開發伺服器的代理規則

在開發模式下的API代理

當需要整合當前模板到現有後臺框架的時候。最常見的需求就是使用開發伺服器請求後臺API。為了這樣，我們可以執行開發伺服器和後臺伺服器，讓開發伺服器代理api請求到真正的後臺伺服器。

為了配置代理規則。編輯config/index.js中的dev.proxyTable.這個開發伺服器是使用http-proxy-middleware
來代理。所以你可以檢視文件來了解使用細節。這邊有個簡單的例子。

// 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上面去。

URL 匹配

除了靜態URL之外，您還可以使用全域性模式來匹配網址，例如/ API/**。除此之外，你可以自定義方法來確定是否請求可以被代理。

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

單元測試

專案提供了2種單元測試。
1.Jest
2.Karma and Mocha

Jest

啟動JSDOM的測試執行器執行測試並將結果報告給我們。

Files

setup.js
Jest在執行單元測試之前執行此檔案。 它將Vue生產提示設定為false。

Mocking 依賴

Karma and Mocha