安裝


目錄


#開發版本


#Bower

AMD模組載入器


相容性

Vue

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

相容 ECMAScript 5 的瀏覽器

。

更新日誌

#最新穩定版本：2.6.10


每個版本的更新日誌請見

GitHub

。

Vue Devtools

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

直接用<script> 引入

########## ##直接下載並以###<script>### 標籤引入，###Vue### 會被註冊為全域變數。 ############在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!############開發版本### ###包含完整的警告和偵錯模式#######

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


##CDN

對於製作原型或學習，你可以這樣使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

對於生產環境，我們推薦連結到一個明確的版本號和建立文件，以避免新版本造成的不可預期的破壞：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

如果你使用原生ES Modules，這裡也有一個相容ES Module 的建置檔：

<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 的版本更新可能略滯後)。

請確認了解

不同建置版本並在你發佈的網站中使用生產環境版本，把 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 建置版本。這裡列出了它們之間的差異：

#UMDCommonJSES Module (基於建置工具使用)ES Module (直接用於瀏覽器)#vue.jsvue.common.jsvue.esm.jsvue.esm.browser.jsvue.runtime.jsvue.runtime.common.jsvue.runtime.esm. js-vue.min.js- -vue.esm.browser.min.jsvue.runtime.min.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：從2.6 開始Vue 會提供兩個ES Modules (ESM) 建置檔：

    • #為打包工具提供的ESM：為諸如webpack 2 或Rollup 提供的現代打包工具。 ESM 格式被設計為可以被靜態分析，所以打包工具可以利用這一點來進行「tree-shaking」並將用不到的程式碼排除出最終的套件。為這些打包工具提供的預設檔 (pkg.module) 是只有運行時的 ES Module 建置 (vue.runtime.esm.js)。

    • 為瀏覽器提供的ESM (2.6 )：用於在現代瀏覽器中透過<script type="module"> 直接匯入


# 執行時間編譯器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': require.resolve('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"
  }
}


開發環境v​​s.生產環境模式

對於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 來源設定為國內的鏡像，可以大幅提升安裝速度。


→

PHP中文網

首頁首頁課程課程文章文章問答問答詞典詞典手册手册下載下載搜尋搜尋APP下載 APP下載

完整版
#只包含運行時版
#完整版(生產環境)
#只包含執行時間版(生產環境)