懵逼馆衔，竟然沒(méi)有中文版。自己對(duì)英文不敏感怨绣，看一遍記錄下來(lái)角溃，備用。

介紹

這個(gè)模板是針對(duì)大型應(yīng)用篮撑，默認(rèn)你已經(jīng)熟悉Webpack和vue-loader减细。確定已經(jīng)讀過(guò)vue-loader文檔去面對(duì)一般的工作流程。

快速開(kāi)始

為了使用這個(gè)模板赢笨，需要使用vue-cli腳手架未蝌。推薦使用npm3+

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

項(xiàng)目結(jié)構(gòu)

.
├── 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)（需要預(yù)處理的靜態(tài)資源）
│       └── ...
├── static/                     # pure static assets (directly copied)（純靜態(tài)資源）
├── test/(測(cè)試先不看了)
│   └── 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/
這個(gè)目錄包含生產(chǎn)和開(kāi)發(fā)環(huán)境下的webpack構(gòu)建配置驮吱。通常情況下你不需要接觸這些文件，除非你想自定義webpack構(gòu)建萧吠。在這種情況下左冬，你需要去瀏覽build/webpack.base.conf.js
config/index.js
這個(gè)是一個(gè)暴露了在在build過(guò)程中大部分配置選項(xiàng)的配置文件。See API Proxying During Development and Integrating with Backend Framework for more details.
src/
項(xiàng)目代碼目錄纸型。如果使用了Vuex可以參考recommendations for Vuex applications.
static/
不需要預(yù)處理的靜態(tài)資源文件
See Handling Static Assets for more details.
test/unit
測(cè)試文件
See Unit Testing for more details.
test/e2e
e2e測(cè)試文件
See End-to-end Testing for more details.
index.html
這個(gè)單頁(yè)面模板拇砰。在開(kāi)發(fā)和構(gòu)建中。webpack 最后生成的資源的都在注入到這個(gè)模板狰腌。生成最后的html
package.json
包含依賴(lài)的npm包文件和build指令

Build 指令

所有執(zhí)行都是NPM腳本執(zhí)行
npm run dev
開(kāi)啟node.js本地服務(wù)器

• 單頁(yè)面組件需要的webpack + vue-loader
• 熱加載（修改文件除破，無(wú)需重啟服務(wù)器）
• 編譯覆蓋
• ESlint
• 原文件映射
  npm run build
  為生產(chǎn)構(gòu)建資源文件
• js壓縮（ UglifyJS v3.）
• html壓縮html-minifier.
• 所有組件中的css文件被提取到一個(gè)文件中，壓縮cssnano.
• 為了長(zhǎng)期緩存素有的靜態(tài)資源都被編譯帶有版本哈希琼腔。生產(chǎn)模式下的index.html會(huì)自動(dòng)生成url為這些資源
  npm run unit
  利用Jest在JSDOM中進(jìn)行單元測(cè)試
• 支持es6
• 容易mocking
  npm run e2e
  利用nightWatch進(jìn)行e2e測(cè)試瑰枫。
• 在多個(gè)瀏覽器進(jìn)行并行測(cè)試
• 開(kāi)箱即用的命令
  • Selenium and chromedriver dependencies自動(dòng)處理
  • 自動(dòng)生成Selenium服務(wù)器。
    npm run lint
    運(yùn)行eslint

Babel 配置

這個(gè)模板使用了babel-preset-env來(lái)配置babel丹莲，更多信息參考http://2ality.com/2017/02/babel-preset-env.html.
一個(gè)預(yù)選設(shè)置的Babel可以自動(dòng)將es6降級(jí)為es5,根據(jù)目標(biāo)瀏覽器或者運(yùn)行環(huán)境
使用browserslist
去壓縮這些信息所以我們可以使用valid query format supported by browserslist.
然后這里有個(gè)警告光坝，browserslist推薦定義目標(biāo)文件類(lèi)似package.json或者. browserslistrc配置文件。這樣允許一些工具圾笨，類(lèi)似 autoprefixer and eslint-plugin-compat 去分享這些配置教馆，在這個(gè)模板中browserslist配置在package.json:

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

但在最新的babel-preset-envv1.6.1穩(wěn)定發(fā)行版中。沒(méi)有支持加載配置文件從package.json擂达，所以配置環(huán)境重復(fù)在.babelrc.如果你希望改變你的目標(biāo)環(huán)境土铺，請(qǐng)確定更新了package.json和. babelrc。這個(gè)問(wèn)題已經(jīng)在測(cè)試版修正板鬓。模板會(huì)在正式版出來(lái)更新悲敷。

Linter配置

這個(gè)模板利用ESLinter作為linter,使用標(biāo)準(zhǔn)的預(yù)設(shè)和一些自定義操作。
如果你不喜歡這些預(yù)定的規(guī)則俭令，你有已下幾種選擇后德。
1。在.eslintrc.js中重寫(xiě)linter規(guī)則抄腔。例如你可以強(qiáng)制使用分號(hào)而不是忽略他們：

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

2. 當(dāng)生成項(xiàng)目的時(shí)候瓢湃，選擇一個(gè)不同的預(yù)設(shè)。例如eslint-config-airbnb.
   3 當(dāng)生成項(xiàng)目定義自己的規(guī)則的時(shí)候赫蛇，對(duì)于ESLinter選擇none绵患。更多細(xì)節(jié)See ESLint documentation for more details.

修正Linter錯(cuò)誤

你可以使用以下命令去修復(fù)錯(cuò)誤（不能修復(fù)所有的錯(cuò)誤）

npm run lint -- --fix

在中間的--是有必要的確定--fix是傳給lint 而不是npm的
該模板為大多數(shù)CSS預(yù)處理器預(yù)先配置了CSS提取。要使用預(yù)處理器悟耘，只需要安裝相應(yīng)的webpack加載程序落蝙。例如SASS

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

你需要安裝node-sass因?yàn)閟ass-loader依賴(lài)他

在組件中中使用預(yù)處理器

一旦你安裝了預(yù)處理器，你可以在.vue 中使用style標(biāo)簽的lang屬性

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

一個(gè)SASS語(yǔ)法的提示

lang =“scss”對(duì)應(yīng)于CSS超集語(yǔ)法（帶花括號(hào)和分號(hào)）。
lang =“sass”對(duì)應(yīng)于基于縮進(jìn)的語(yǔ)法筏勒。

PostCss

• .vue文件和樣式文件（* .css移迫，* .scss等）中的樣式默認(rèn)被PostCss輸出。你不要使用特定的加載器
  你可以簡(jiǎn)單的增加PostCss插件管行，通過(guò)在根目錄添加.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.

獨(dú)立的CSS文件

為了確保提取和處理的一致性厨埋。推薦你導(dǎo)入全局，獨(dú)立的樣式在App.vue組件中病瞳。例如

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

在程序中你應(yīng)該只對(duì)自己寫(xiě)的樣式這樣操作揽咕。對(duì)于已經(jīng)存在的庫(kù) e.g. Bootstrap or Semantic UI你可以放在index.html并且引入他們。這樣避免構(gòu)建時(shí)間和瀏覽器緩存

處理靜態(tài)Assets

你應(yīng)該在注意到在項(xiàng)目結(jié)構(gòu)總有2個(gè)靜態(tài)資源文件夾src/assets和static/.區(qū)別是什么呢套菜？

Webpacked Assets

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

因?yàn)?code>logo.png不是js,當(dāng)作為模塊依賴(lài)性對(duì)待的時(shí)候，我們需要使用url-loader and file-loader去處理戏溺。這個(gè)模板渣蜗，已經(jīng)配置了這些loaders。你可以免費(fèi)獲得如filename fingerprinting和 base64內(nèi)聯(lián)功能旷祸，當(dāng)你使用相對(duì)路徑的時(shí)候不用考慮部署問(wèn)題耕拷。

由于這些資產(chǎn)可能在構(gòu)建過(guò)程中被內(nèi)聯(lián)/復(fù)制/重命名，因此它們基本上是源代碼的一部分托享。這就是為什么建議將Webpack處理的靜態(tài)資源放置在/ src中以及其他源文件的原因骚烧。 實(shí)際上，你甚至不必將它們?nèi)糠旁? src / assets中：您可以使用它們根據(jù)模塊/組件組織它們闰围。 例如赃绊，您可以將每個(gè)組件放在其自己的目錄中，其靜態(tài)assets就位于其旁邊羡榴。

Asset 解析規(guī)則

1 urls 相對(duì)路徑：類(lèi)似./assets/logo.png會(huì)被解釋成模塊依賴(lài)碧查，會(huì)被替換成由webpack基于你輸出配置的自動(dòng)生成的url路徑
2 沒(méi)有前綴的urls 類(lèi)似assets/logo.png等同于./assets/logo.png
3 帶有~前綴的urls : 會(huì)被作為一個(gè)模塊請(qǐng)求，類(lèi)似require('some-module/image.png')校仑，如果你想利用Webpack模塊解析配置忠售，你需要使用這個(gè)前綴
4 根目錄相對(duì)路徑。 不會(huì)被處理

在js中獲取Asset路徑

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

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

注釋?zhuān)?例子中的圖片在最后的build中都會(huì)在./bgs/。因?yàn)閣ebpack無(wú)法猜測(cè)在運(yùn)行是什么時(shí)候時(shí)候使用到邢滑。

真正靜態(tài)資源

作為對(duì)比腐螟，在static/不會(huì)被webapck處理.他們會(huì)被直接復(fù)制并且相同的文件名。你必須使用他們用絕對(duì)路徑困后。這個(gè)絕對(duì)路徑是這是通過(guò)在config.js中加入build.assetsPublicPath和build.assetsSubDirectory來(lái)確定的

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

所有放在static/文件加下面的文件必須使用絕對(duì)路徑static/filename乐纸。如果你改變了assetSubDirectory為asset。路徑變?yōu)?code>asset/filename

環(huán)境變量

有時(shí)根據(jù)應(yīng)用程序運(yùn)行的環(huán)境具有不同的配置值是可行的摇予。
類(lèi)似

// 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"'
})

注釋?zhuān)?字符串變量需要'"..."'
綜上汽绢，環(huán)境變量

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

使用

最簡(jiǎn)單的使用方法

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

于后端框架集成

如果你構(gòu)建的是純靜態(tài)界面（沒(méi)有端口api交互的），你就不需要編輯config/index.js.
然而你像集成這個(gè)模板到現(xiàn)有的后端框架中侧戴。你需要編輯config/index.js直接生成前段資源給后端宁昭。
默認(rèn)的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的括號(hào)中，有這幾個(gè)選項(xiàng)酗宋。
build.index

必須是當(dāng)?shù)匚募到y(tǒng)中的絕對(duì)路徑

這個(gè)是index.html自動(dòng)生成的
你可以相應(yīng)地編輯index.html并將此路徑指向您的后端應(yīng)用程序呈現(xiàn)的視圖文件积仗，
app/views/layouts/application.html.erb for a Rails app, or resources/views/index.blade.php for a Laravel app.

build.assetsRoot

也必須是絕對(duì)路徑

必須指向包含靜態(tài)資源的根目錄
For example, public/ for both Rails/Laravel.
build.assetsSubDirectory
webpack生成器嵌套在build.assetsRoot文件夾中，其他文件不應(yīng)該混合在一起蜕猫。舉個(gè)例子寂曹，如果build.assetsRoot是/path/to/dist.build.assetsSubDirectory是static。那么webpack 生成的資源就會(huì)在path/to/dist/static文件夾下回右。

這個(gè)目錄會(huì)在每次build的時(shí)候清除隆圆。所以他應(yīng)該只包含build生成的資源文件。

在/static中的文件都在會(huì)構(gòu)建時(shí)翔烁，拷貝到該目錄渺氧。這意思是如果你改變了這個(gè)前綴所有在/static中絕對(duì)路徑的URLs都需要改變。

build.assetsPublicPath
這應(yīng)該是你的build.assetsRoot將通過(guò)HTTP提供的URL路徑蹬屹。 在大多數(shù)情況下侣背，這將是根（/）。 只有在后端框架為路徑前綴提供靜態(tài)資產(chǎn)時(shí)才更改此設(shè)置哩治。 在內(nèi)部秃踩，這作為output.publicPath傳遞給Webpack。

build.productionSourceMap
是否在生產(chǎn)模式下生成資源映射

dev.port
指定開(kāi)發(fā)端口號(hào)

dev.proxyTable
定義開(kāi)發(fā)服務(wù)器的代理規(guī)則

在開(kāi)發(fā)模式下的API代理

當(dāng)需要集成當(dāng)前模板到現(xiàn)有后臺(tái)框架的時(shí)候业筏。最常見(jiàn)的需求就是使用開(kāi)發(fā)服務(wù)器請(qǐng)求后臺(tái)API憔杨。為了這樣，我們可以運(yùn)行開(kāi)發(fā)服務(wù)器和后臺(tái)服務(wù)器蒜胖，讓開(kāi)發(fā)服務(wù)器代理api請(qǐng)求到真正的后臺(tái)服務(wù)器消别。

為了配置代理規(guī)則。編輯config/index.js中的dev.proxyTable.這個(gè)開(kāi)發(fā)服務(wù)器是使用http-proxy-middleware
來(lái)代理台谢。所以你可以查看文檔來(lái)了解使用細(xì)節(jié)寻狂。這邊有個(gè)簡(jiǎn)單的例子。

// 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': ''
        }
      }
    }
  }
}

上面的例子會(huì)代理請(qǐng)求/api/posts/1到http://jsonplaceholder.typicode.com/posts/1上面去朋沮。

URL 匹配

除了靜態(tài)URL之外蛇券，您還可以使用全局模式來(lái)匹配網(wǎng)址，例如/ API/**。除此之外纠亚，你可以自定義方法來(lái)確定是否請(qǐng)求可以被代理塘慕。

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

單元測(cè)試

項(xiàng)目提供了2種單元測(cè)試。
1.Jest
2.Karma and Mocha

Jest

啟動(dòng)JSDOM的測(cè)試運(yùn)行器運(yùn)行測(cè)試并將結(jié)果報(bào)告給我們蒂胞。

Files

setup.js
Jest在運(yùn)行單元測(cè)試之前運(yùn)行此文件图呢。 它將Vue生產(chǎn)提示設(shè)置為false。

Mocking 依賴(lài)

Karma and Mocha