Vue.js 安装
安裝
兼容性
Vue?不支持?IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。
更新日志
最新穩定版本：2.5.17
每個版本的更新日志見?GitHub。
Vue Devtools
在使用 Vue 時，我們推薦在你的瀏覽器上安裝?Vue Devtools。它允許你在一個更友好的界面中審查和調試 Vue 應用。
直接用?<script>?引入
直接下載并用?<script>?標簽引入，Vue?會被注冊為一個全局變量。
在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!
開發版本包含完整的警告和調試模式
生產版本刪除了警告，30.90KB min+gzip
CDN
我們推薦鏈接到一個你可以手動更新的指定版本號：
| <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.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 構建版本。這里列出了它們之間的差別：
| 完整版 | 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：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
總結
- 上一篇： Vue.js 对比其他框架
- 下一篇： Vue起步