## 兼容性 Vue **不支持** IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有[兼容 ECMAScript 5 的瀏覽器](https://caniuse.com/#feat=es5)。 ## 更新日志 最新穩定版本：2.5.16 每個版本的更新日志見 [GitHub](https://github.com/vuejs/vue/releases)。 ## Vue Devtools 在使用 Vue 時，我們推薦在你的瀏覽器上安裝 [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools)。它允許你在一個更友好的界面中審查和調試 Vue 應用。 ## 直接用 `<script>` 引入 直接下載并用 `<script>` 標簽引入，`Vue` 會被注冊為一個全局變量。 <p class="tip">在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!</p> <div id="downloads"> <a class="button" href="https://vuejs.org/js/vue.js" download>開發版本</a><span class="light info">包含完整的警告和調試模式</span> <a class="button" href="https://vuejs.org/js/vue.min.js" download>生產版本</a><span class="light info">刪除了警告，30.90KB min+gzip</span> </div> ### CDN 我們推薦鏈接到一個你可以手動更新的指定版本號： ``` html <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> ``` 你可以在 [cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue/) 瀏覽 NPM 包的源代碼。 Vue 也可以在 [unpkg](https://unpkg.com/vue@{{vue_version}}/dist/vue.js) 和 [cdnjs](https://cdnjs.cloudflare.com/ajax/libs/vue/{{vue_version}}/vue.js) 上獲取 (cdnjs 的版本更新可能略滯后)。 請確認了解[不同構建版本](#對不同構建版本的解釋)并在你發布的站點中使用**生產環境版本**，把 `vue.js` 換成 `vue.min.js`。這是一個更小的構建，可以帶來比開發環境下更快的速度體驗。 ## NPM 在用 Vue 構建大型應用時推薦使用 NPM 安裝^{[[1]](#footnote-1)}。NPM 能很好地和諸如 [webpack](https://webpack.js.org/) 或 [Browserify](http://browserify.org/) 模塊打包器配合使用。同時 Vue 也提供配套工具來開發[單文件組件](single-file-components.html)。 ``` bash # 最新穩定版 $ npm install vue ``` ## 命令行工具 (CLI) Vue 提供了一個[官方的 CLI](https://github.com/vuejs/vue-cli)，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現代前端工作流提供了 batteries-included 的構建設置。只需要幾分鐘的時間就可以運行起來并帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 [Vue CLI 的文檔](https://cli.vuejs.org)。 <p class="tip">CLI 工具假定用戶對 Node.js 和相關構建工具有一定程度的了解。如果你是新手，我們強烈建議先在不用構建工具的情況下通讀<a href="./">指南</a>，在熟悉 Vue 本身之后再使用 CLI。</p> ## 對不同構建版本的解釋 在 [NPM 包的 `dist/` 目錄](https://cdn.jsdelivr.net/npm/vue/dist/)你將會找到很多不同的 Vue.js 構建版本。這里列出了它們之間的差別： | | UMD | CommonJS | ES Module | | --- | --- | --- | --- | | **完整版** | vue.js | vue.common.js | vue.esm.js | | **只包含運行時版** | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | | **完整版 (生產環境)** | vue.min.js | - | - | | **只包含運行時版 (生產環境)** | vue.runtime.min.js | - | - | ### 術語 - **完整版**：同時包含編譯器和運行時的版本。 - **編譯器**：用來將模板字符串編譯成為 JavaScript 渲染函數的代碼。 - **運行時**：用來創建 Vue 實例、渲染并處理虛擬 DOM 等的代碼。基本上就是除去編譯器的其它一切。 - **[UMD](https://github.com/umdjs/umd)**：UMD 版本可以通過 `<script>` 標簽直接用在瀏覽器中。jsDelivr CDN 的 [https://cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue) 默認文件就是運行時 + 編譯器的 UMD 版本 (`vue.js`)。 - **[CommonJS](http://wiki.commonjs.org/wiki/Modules/1.1)**：CommonJS 版本用來配合老的打包工具比如 [Browserify](http://browserify.org/) 或 [webpack 1](https://webpack.github.io)。這些打包工具的默認文件 (`pkg.main`) 是只包含運行時的 CommonJS 版本 (`vue.runtime.common.js`)。 - **[ES Module](http://exploringjs.com/es6/ch_modules.html)**：ES module 版本用來配合現代打包工具比如 [webpack 2](https://webpack.js.org) 或 [Rollup](https://rollupjs.org/)。這些打包工具的默認文件 (`pkg.module`) 是只包含運行時的 ES Module 版本 (`vue.runtime.esm.js`)。 ### 運行時 + 編譯器 vs. 只包含運行時 如果你需要在客戶端編譯模板 (比如傳入一個字符串給 `template` 選項，或掛載到一個元素上并以其 DOM 內部的 HTML 作為模板)，就將需要加上編譯器，即完整版： ``` js // 需要編譯器 new Vue({ template: '<div>{{ hi }}</div>' }) // 不需要編譯器 new Vue({ render (h) { return h('div', this.hi) } }) ``` 當使用 `vue-loader` 或 `vueify` 的時候，`*.vue` 文件內部的模板會在構建時預編譯成 JavaScript。你在最終打好的包里實際上是不需要編譯器的，所以只用運行時版本即可。 因為運行時版本相比完整版體積要小大約 30%，所以應該盡可能使用這個版本。如果你仍然希望使用完整版，則需要在打包工具里配置一個別名： #### webpack ``` js module.exports = { // ... resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 時需用 'vue/dist/vue.common.js' } } } ``` #### Rollup ``` js const alias = require('rollup-plugin-alias') rollup({ // ... plugins: [ alias({ 'vue': 'vue/dist/vue.esm.js' }) ] }) ``` #### Browserify 添加到你項目的 `package.json`： ``` js { // ... "browser": { "vue": "vue/dist/vue.common.js" } } ``` #### Parcel 在你項目的 `package.json` 中添加： ``` js { // ... "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` 選項： ``` js module.exports = { mode: 'production' } ``` 但是在 webpack 3 及其更低版本中，你需要使用 [DefinePlugin](https://webpack.js.org/plugins/define-plugin/)： ``` js var webpack = require('webpack') module.exports = { // ... plugins: [ // ... new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }) ] } ``` #### Rollup 使用 [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace)： ``` js const replace = require('rollup-plugin-replace') rollup({ // ... plugins: [ replace({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] }).then(...) ``` #### Browserify 為你的包應用一次全局的 [envify](https://github.com/hughsk/envify) 轉換。 ``` bash NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js ``` 也可以移步[生產環境部署](deployment.html)。 ### CSP 環境 有些環境，如 Google Chrome Apps，會強制應用內容安全策略 (CSP)，不能使用 `new Function()` 對表達式求值。這時可以用 CSP 兼容版本。完整版本依賴于該功能來編譯模板，所以無法在這些環境下使用。 另一方面，運行時版本則是完全兼容 CSP 的。當通過 [webpack + vue-loader](https://github.com/vuejs-templates/webpack-simple) 或者 [Browserify + vueify](https://github.com/vuejs-templates/browserify-simple) 構建時，模板將被預編譯為 `render` 函數，可以在 CSP 環境中完美運行。 ## 開發版本 **重要**: GitHub 倉庫的 `/dist` 文件夾只有在新版本發布時才會提交。如果想要使用 GitHub 上 Vue 最新的源碼，你需要自己構建！ ``` bash git clone https://github.com/vuejs/vue.git node_modules/vue cd node_modules/vue npm install npm run build ``` ## Bower Bower 只提供 UMD 版本。 ``` bash # 最新穩定版本 $ bower install vue ``` ## AMD 模塊加載器 所有 UMD 版本都可以直接用作 AMD 模塊。 <small> **譯者注** <a id="footnote-1"></a>[1] 對于中國大陸用戶，建議將 NPM 源設置為[國內的鏡像](https://npm.taobao.org/)，可以大幅提升安裝速度。 </small>