安裝

相容性

Vue 不支援 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支援所有相容 ECMAScript 5 的瀏覽器。

更新日誌

最新穩定版本：2.5.17

每個版本的更新日誌見 GitHub。

Vue Devtools

在使用 Vue 時，我們推薦在你的瀏覽器上安裝 Vue Devtools。它允許你在一個更友好的介面中審查和除錯 Vue 應用。

直接用 <script> 引入

直接下載並用 <script>

在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!

開發版本包含完整的警告和除錯模式

生產版本刪除了警告，30.90KB min+gzip

CDN

我們推薦連結到一個你可以手動更新的指定版本號：

<script src="https://cdn.jsdelivr.net/npm/[email protected]5.17/dist/vue.js"></script>

你可以在 cdn.jsdelivr.net/npm/vue

Vue 也可以在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯後)。

請確認瞭解不同構建版本並在你釋出的站點中使用生產環境版本，把 vue.js 換成 vue.min.js。這是一個更小的構建，可以帶來比開發環境下更快的速度體驗。

NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模組打包器配合使用。同時 Vue 也提供配套工具來開發

# 最新穩定版
$ npm install vue

命令列工具 (CLI)

Vue 提供了一個官方的 CLI，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries-included 的構建設定。只需要幾分鐘的時間就可以執行起來並帶有熱過載、儲存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文件。

CLI 工具假定使用者對 Node.js 和相關構建工具有一定程度的瞭解。如果你是新手，我們強烈建議先在不用構建工具的情況下通讀指南，在熟悉 Vue 本身之後再使用 CLI。

對不同構建版本的解釋

在 NPM 包的 dist/ 目錄你將會找到很多不同的 Vue.js 構建版本。這裡列出了它們之間的差別：

術語

• 完整版：同時包含編譯器和執行時的版本。

• 編譯器：用來將模板字串編譯成為 JavaScript 渲染函式的程式碼。

• 執行時：用來建立 Vue 例項、渲染並處理虛擬 DOM 等的程式碼。基本上就是除去編譯器的其它一切。

• UMD：UMD 版本可以通過 <script> 標籤直接用在瀏覽器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 預設檔案就是執行時 + 編譯器的 UMD 版本 (vue.js)。

• CommonJS：CommonJS 版本用來配合老的打包工具比如 Browserify 或 webpack 1。這些打包工具的預設檔案 (pkg.main) 是隻包含執行時的 CommonJS 版本 (vue.runtime.common.js)。

• ES Module：ES module 版本用來配合現代打包工具比如 webpack 2 或 Rollup。這些打包工具的預設檔案 (pkg.module) 是隻包含執行時的 ES Module 版本 (vue.runtime.esm.js)。

執行時 + 編譯器 vs. 只包含執行時

如果你需要在客戶端編譯模板 (比如傳入一個字串給 template 選項，或掛載到一個元素上並以其 DOM 內部的 HTML 作為模板)，就將需要加上編譯器，即完整版：

// 需要編譯器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要編譯器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

當使用 vue-loader 或 vueify 的時候，*.vue 檔案內部的模板會在構建時預編譯成 JavaScript。你在最終打好的包裡實際上是不需要編譯器的，所以只用執行時版本即可。

因為執行時版本相比完整版體積要小大約 30%，所以應該儘可能使用這個版本。如果你仍然希望使用完整版，則需要在打包工具裡配置一個別名：

webpack

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js'
    }
  }
}

Rollup

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})

Browserify

新增到你專案的 package.json：

{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

Parcel

在你專案的 package.json 中新增：

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

開發環境 vs. 生產環境模式

對於 UMD 版本來說，開發環境/生產環境模式是硬編碼好的：開發環境下用未壓縮的程式碼，生產環境下使用壓縮後的程式碼。

CommonJS 和 ES Module 版本是用於打包工具的，因此我們不提供壓縮後的版本。你需要自行將最終的包進行壓縮。

CommonJS 和 ES Module 版本同時保留原始的 process.env.NODE_ENV 檢測，以決定它們應該執行在什麼模式下。你應該使用適當的打包工具配置來替換這些環境變數以便控制 Vue 所執行的模式。把 process.env.NODE_ENV 替換為字串字面量同時可以讓 UglifyJS 之類的壓縮工具完全丟掉僅供開發環境的程式碼塊，以減少最終的檔案尺寸。

webpack

在 webpack 4+ 中，你可以使用 mode 選項：

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

使用 rollup-plugin-replace：

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

為你的包應用一次全域性的 envify 轉換。

NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js

也可以移步生產環境部署。

CSP 環境

有些環境，如 Google Chrome Apps，會強制應用內容安全策略 (CSP)，不能使用 new Function() 對錶達式求值。這時可以用 CSP 相容版本。完整版本依賴於該功能來編譯模板，所以無法在這些環境下使用。

另一方面，執行時版本則是完全相容 CSP 的。當通過 webpack + vue-loader 或者 Browserify + vueify 構建時，模板將被預編譯為 render 函式，可以在 CSP 環境中完美執行。

開發版本

重要: GitHub 倉庫的 /dist 資料夾只有在新版本釋出時才會提交。如果想要使用 GitHub 上 Vue 最新的原始碼，你需要自己構建！

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Bower 只提供 UMD 版本。

# 最新穩定版本
$ bower install vue

AMD 模組載入器

所有 UMD 版本都可以直接用作 AMD 模組。

譯者注
[1] 對於中國大陸使用者，建議將 NPM 源設定為國內的映象，可以大幅提升安裝速度。

from: https://cn.vuejs.org/v2/guide/installation.html