指南

安装

兼容性

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用的 ECMAScript 5 特性在 IE8 无法模拟。Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

更新日志

最新稳定版本：2.5.13

每个版本的详细更新日志见 GitHub。

Vue Devtools

在使用 Vue 时，我们推荐你在浏览器中安装 Vue Devtools ，可以通过更加友好的用户界面，来审查和调试你的 Vue 应用程序。

直接引入 <script> 标签

通过 script 标签直接下载并引入，Vue 会被注册为一个全局变量。

在开发环境，不要使用最小压缩版本。因为开发版本中，所有常见错误的警告会更加友好！


开发环境版本包含完整的警告和调试模式

生产环境版本删除警告，30.67KB min+gzip

CDN

我们比较推荐的方式是，链接到可以手动修改的指定版本上：

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

你可以在 cdn.jsdelivr.net/npm/vue 浏览 npm 包的源码。

还可以使用 unpkg 和 cdnjs 来获取 Vue（cdnjs 需要一段时间才能同步，所以可能会无法获取最新版本）。

请务必阅读 Vue 不同构建版本的解释说明，并且在你发布的网站中使用生产环境版本，也就是将 vue.js 替换为 vue.min.js。
这是一个为了更快速的执行，而进行更小体积优化的构建版本，并不是为了好的开发体验。

NPM

在用 Vue 构建大型应用程序时，推荐使用 NPM 安装方式。它可以很好地与模块打包器(module bundler)（例如 webpack 或 Browserify）配合使用。Vue 还提供用于创建单文件组件的配套工具。

# 最新稳定版本
$ npm install vue

命令行接口工具

Vue.js 提供一个官方的命令行接口工具，用于快速搭建大型单页面应用程序。能够为现代前端开发的工作流程，带来持久强力的基础架构。只需几分钟，就可以建立并运行一个带有「热重载、保存时代码检查以及可直接用于生产环境的构建配置」的项目：

# 安装 vue-cli
$ npm install --global vue-cli
# 使用 "webpack" 模板创建一个新项目
$ vue init webpack my-project
# 安装依赖，然后开始！
$ cd my-project
$ npm run dev

CLI 工具假定用户对 Node.js 和相关构建工具预先有一定程度的了解。如果你是初次接触 Vue，或者刚开始了解前端构建工具，我们强烈建议你不要使用任何构建工具，来完成指南中的示例。

对于大陆用户，建议将 npm 的注册表源设置为国内的镜像，可以大幅提升安装速度。

不同构建版本的解释说明

在 NPM 包的 dist/ 目录下，你会找到许多不同构建版本的 Vue.js。以下是它们之间差异的概述：

UMD CommonJS ES Module
完整版本(Full) vue.js vue.common.js vue.esm.js
只含有运行时版本(Runtime-only) vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
完整版本（生产环境） vue.min.js - -
只含有运行时版本（生产环境） vue.runtime.min.js - -

术语说明

运行时+编译器(Runtime + Compiler)版本 vs 只含有运行时版本(Runtime-only)

如果你需要在客户端编译模板（例如，向 template 选项传入一个字符串，或者需要将模板中的非 DOM 的 HTML 挂载到一个元素），你需要带有编译器的版本，因而需要完整构建版本。

// 这种情况需要编译器(compiler)
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 这种情况不需要
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

在使用 vue-loader 或 vueify 时，*.vue 文件中的模板会 在构建时(build time)预编译(pre-compile)为 JavaScript。最终生成的 bundle 中你不再需要编译器(compiler)，因此可以直接使用只含有运行时的构建版本(runtime-only)。

由于只含有运行时构建版本(runtime-only)比完整构建版本(full-build)轻量大约 30%，你应该尽可能使用只含有运行时的构建版本。如果你还是希望使用完整构建版本，则需要在打包器中配置别名：

由于运行时版本的构建比其全面版本的重量轻约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"
  }
}

开发环境模式 vs 生产环境模式

对于 UMD 构建版本，开发环境/生产环境模式是必须配置的选项(hard-coded)，未压缩版本文件用于开发环境，压缩文件用于生产环境。

CommonJS 和 ES 模块构建版本适用于打包器，因此我们不需要为它们提供压缩版本。你需要自己负责对最终的 bundle 进行压缩。

CommonJS 和 ES 模块构建版本也可以保留初始环境 process.env.NODE_ENV 变量检测，以在打包器运行时的决定具体使用的模式。你应该使用合适的打包器配置来替换这些环境变量，以在打包器运行时控制 Vue 使用哪种模式。将 process.env.NODE_ENV 替换为字符串字面量，可以允许像 UglifyJS 的压缩工具将那些仅开发环境(development-only)用到的代码块全部删除，以减少最终文件的大小。

webpack

使用 webpack 的 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 来全局替换 bundle。

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

另请参阅生产环境部署。

CSP 环境

某些环境（例如 Google Chrome Apps）强制执行内容安全策略(Content Security Policy - CSP)，禁止使用 new Function() 对表达式求值。完整构建版本在编译模板时，会依赖于此功能，因此在这些环境下无法使用。

另一方面，只含有运行时的构建版本(runtime-only build)可以完全兼容 CSP(fully CSP-compliant)。当你在 webpack + vue-loader 或 Browserify + vueify 中使用只含有运行时的构建版本(runtime-only build)时，模板将会预编译为 render 函数，最终的 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 版本的 Vue.js。

# 最新稳定版本
$ bower install vue

AMD 模块加载器

所有构建为 UMD 版本的 Vue.js 都可以直接当作 AMD 模块使用。

原文：https://vuejs.org/v2/guide/installation.html

介绍 →
发现错误？想参与编辑？ 在 GitHub 上编辑此页！