安裝
在使用 Vue 時(shí)，我們推薦在你的瀏覽器上安裝 Vue Devtools。它允許你在一個(gè)更友好的界面中審查和調(diào)試 Vue 應(yīng)用。
目錄
兼容性
Vue 不支持 IE8 及以下版本，因?yàn)?Vue 使用了 IE8 無(wú)法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。
更新日志
最新穩(wěn)定版本：2.6.10
每個(gè)版本的更新日志見(jiàn) GitHub。
Vue Devtools
在使用 Vue 時(shí)，我們推薦在你的瀏覽器上安裝 Vue Devtools。它允許你在一個(gè)更友好的界面中審查和調(diào)試 Vue 應(yīng)用。
直接用 <script> 引入
直接下載并用 <script> 標(biāo)簽引入，Vue 會(huì)被注冊(cè)為一個(gè)全局變量。
在開(kāi)發(fā)環(huán)境下不要使用壓縮版本，不然你就失去了所有常見(jiàn)錯(cuò)誤相關(guān)的警告!
開(kāi)發(fā)版本包含完整的警告和調(diào)試模式
生產(chǎn)版本刪除了警告，33.30KB min+gzip
CDN
對(duì)于制作原型或?qū)W習(xí)，你可以這樣使用最新版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
對(duì)于生產(chǎn)環(huán)境，我們推薦鏈接到一個(gè)明確的版本號(hào)和構(gòu)建文件，以避免新版本造成的不可預(yù)期的破壞：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
如果你使用原生 ES Modules，這里也有一個(gè)兼容 ES Module 的構(gòu)建文件：
<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js' </script>
你可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。
Vue 也可以在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯后)。
請(qǐng)確認(rèn)了解不同構(gòu)建版本并在你發(fā)布的站點(diǎn)中使用生產(chǎn)環(huán)境版本，把 vue.js 換成 vue.min.js。這是一個(gè)更小的構(gòu)建，可以帶來(lái)比開(kāi)發(fā)環(huán)境下更快的速度體驗(yàn)。
NPM
在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時(shí) Vue 也提供配套工具來(lái)開(kāi)發(fā)單文件組件。
# 最新穩(wěn)定版 $ npm install vue
命令行工具 (CLI)
Vue 提供了一個(gè)官方的 CLI，為單頁(yè)面應(yīng)用 (SPA) 快速搭建繁雜的腳手架。它為現(xiàn)代前端工作流提供了 batteries-included 的構(gòu)建設(shè)置。只需要幾分鐘的時(shí)間就可以運(yùn)行起來(lái)并帶有熱重載、保存時(shí) lint 校驗(yàn)，以及生產(chǎn)環(huán)境可用的構(gòu)建版本。更多詳情可查閱 Vue CLI 的文檔。
CLI 工具假定用戶對(duì) Node.js 和相關(guān)構(gòu)建工具有一定程度的了解。如果你是新手，我們強(qiáng)烈建議先在不用構(gòu)建工具的情況下通讀 指南，在熟悉 Vue 本身之后再使用 CLI。
對(duì)不同構(gòu)建版本的解釋
在 NPM 包的 dist/ 目錄你將會(huì)找到很多不同的 Vue.js 構(gòu)建版本。這里列出了它們之間的差別：
| UMD | CommonJS | ES Module (基于構(gòu)建工具使用) | ES Module (直接用于瀏覽器) | |
|---|---|---|---|---|
| 完整版 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| 只包含運(yùn)行時(shí)版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
| 完整版 (生產(chǎn)環(huán)境) | vue.min.js | - | - | vue.esm.browser.min.js |
| 只包含運(yùn)行時(shí)版 (生產(chǎn)環(huán)境) | vue.runtime.min.js | - | - | - |
術(shù)語(yǔ)
完整版：同時(shí)包含編譯器和運(yùn)行時(shí)的版本。
編譯器：用來(lái)將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼。
運(yùn)行時(shí)：用來(lái)創(chuàng)建 Vue 實(shí)例、渲染并處理虛擬 DOM 等的代碼?；旧暇褪浅ゾ幾g器的其它一切。
UMD：UMD 版本可以通過(guò)
<script>標(biāo)簽直接用在瀏覽器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默認(rèn)文件就是運(yùn)行時(shí) + 編譯器的 UMD 版本 (vue.js)。CommonJS：CommonJS 版本用來(lái)配合老的打包工具比如 Browserify 或 webpack 1。這些打包工具的默認(rèn)文件 (
pkg.main) 是只包含運(yùn)行時(shí)的 CommonJS 版本 (vue.runtime.common.js)。ES Module：從 2.6 開(kāi)始 Vue 會(huì)提供兩個(gè) ES Modules (ESM) 構(gòu)建文件：
為打包工具提供的 ESM：為諸如 webpack 2 或 Rollup 提供的現(xiàn)代打包工具。ESM 格式被設(shè)計(jì)為可以被靜態(tài)分析，所以打包工具可以利用這一點(diǎn)來(lái)進(jìn)行“tree-shaking”并將用不到的代碼排除出最終的包。為這些打包工具提供的默認(rèn)文件 (
pkg.module) 是只有運(yùn)行時(shí)的 ES Module 構(gòu)建 (vue.runtime.esm.js)。為瀏覽器提供的 ESM (2.6+)：用于在現(xiàn)代瀏覽器中通過(guò)
<script type="module">直接導(dǎo)入
運(yùn)行時(shí) + 編譯器 vs. 只包含運(yùn)行時(shí)
如果你需要在客戶端編譯模板 (比如傳入一個(gè)字符串給 template 選項(xiàng)，或掛載到一個(gè)元素上并以其 DOM 內(nèi)部的 HTML 作為模板)，就將需要加上編譯器，即完整版：
// 需要編譯器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要編譯器
new Vue({
render (h) {
return h('div', this.hi)
}
})當(dāng)使用 vue-loader 或 vueify 的時(shí)候，*.vue 文件內(nèi)部的模板會(huì)在構(gòu)建時(shí)預(yù)編譯成 JavaScript。你在最終打好的包里實(shí)際上是不需要編譯器的，所以只用運(yùn)行時(shí)版本即可。
因?yàn)檫\(yùn)行時(shí)版本相比完整版體積要小大約 30%，所以應(yīng)該盡可能使用這個(gè)版本。如果你仍然希望使用完整版，則需要在打包工具里配置一個(gè)別名：
webpack
module.exports = { // ...
resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時(shí)需用 'vue/dist/vue.common.js'
}
}
}Rollup
const alias = require('rollup-plugin-alias')
rollup({ // ...
plugins: [
alias({ 'vue': require.resolve('vue/dist/vue.esm.js')
})
]
})Browserify
添加到你項(xiàng)目的 package.json：
{ // ...
"browser": { "vue": "vue/dist/vue.common.js"
}
}Parcel
在你項(xiàng)目的 package.json 中添加：
{ // ...
"alias": { "vue" : "./node_modules/vue/dist/vue.common.js"
}
}開(kāi)發(fā)環(huán)境 vs. 生產(chǎn)環(huán)境模式
對(duì)于 UMD 版本來(lái)說(shuō)，開(kāi)發(fā)環(huán)境/生產(chǎn)環(huán)境模式是硬編碼好的：開(kāi)發(fā)環(huán)境下用未壓縮的代碼，生產(chǎn)環(huán)境下使用壓縮后的代碼。
CommonJS 和 ES Module 版本是用于打包工具的，因此我們不提供壓縮后的版本。你需要自行將最終的包進(jìn)行壓縮。
CommonJS 和 ES Module 版本同時(shí)保留原始的 process.env.NODE_ENV 檢測(cè)，以決定它們應(yīng)該運(yùn)行在什么模式下。你應(yīng)該使用適當(dāng)?shù)拇虬ぞ吲渲脕?lái)替換這些環(huán)境變量以便控制 Vue 所運(yùn)行的模式。把 process.env.NODE_ENV 替換為字符串字面量同時(shí)可以讓 UglifyJS 之類的壓縮工具完全丟掉僅供開(kāi)發(fā)環(huán)境的代碼塊，以減少最終的文件尺寸。
webpack
在 webpack 4+ 中，你可以使用 mode 選項(xiàng)：
module.exports = {
mode: 'production'
}但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
]
}Rollup
const replace = require('rollup-plugin-replace')
rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}).then(...)Browserify
為你的包應(yīng)用一次全局的 envify 轉(zhuǎn)換。
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
也可以移步生產(chǎn)環(huán)境部署。
CSP 環(huán)境
有些環(huán)境，如 Google Chrome Apps，會(huì)強(qiáng)制應(yīng)用內(nèi)容安全策略 (CSP)，不能使用 new Function() 對(duì)表達(dá)式求值。這時(shí)可以用 CSP 兼容版本。完整版本依賴于該功能來(lái)編譯模板，所以無(wú)法在這些環(huán)境下使用。
另一方面，運(yùn)行時(shí)版本則是完全兼容 CSP 的。當(dāng)通過(guò) webpack + vue-loader 或者 Browserify + vueify 構(gòu)建時(shí)，模板將被預(yù)編譯為 render 函數(shù)，可以在 CSP 環(huán)境中完美運(yùn)行。
開(kāi)發(fā)版本
重要: GitHub 倉(cāng)庫(kù)的 /dist 文件夾只有在新版本發(fā)布時(shí)才會(huì)提交。如果想要使用 GitHub 上 Vue 最新的源碼，你需要自己構(gòu)建！
git clone https://github.com/vuejs/vue.git node_modules/vue cd node_modules/vue npm install npm run build
Bower
Bower 只提供 UMD 版本。
# 最新穩(wěn)定版本 $ bower install vue
AMD 模塊加載器
所有 UMD 版本都可以直接用作 AMD 模塊。
譯者注
[1] 對(duì)于中國(guó)大陸用戶，建議將 NPM 源設(shè)置為國(guó)內(nèi)的鏡像，可以大幅提升安裝速度。