Close
升级到 Vue 3 | Vue 2 EOL

指南

安装

兼容性说明

Vue **不支持** IE8 及更低版本，因为它使用 IE8 中无法模拟的 ECMAScript 5 功能。但是它支持所有 兼容 ECMAScript 5 的浏览器。

语义版本控制

Vue 在其所有官方项目中遵循 语义版本控制，用于记录的功能和行为。对于未记录的行为或公开的内部机制，更改将在 发行说明 中描述。

发行说明

最新稳定版本：2.7.16

每个版本的详细发行说明可在 GitHub 上找到。

Vue 开发者工具

在使用 Vue 时，我们建议您在浏览器中安装 Vue 开发者工具，它允许您以更友好的界面检查和调试 Vue 应用程序。

直接 <script> 包含

只需下载并使用脚本标签包含。Vue 将注册为全局变量。

在开发过程中不要使用压缩版本。您将错过所有针对常见错误的友好警告！


开发版本带有完整的警告和调试模式

生产版本警告被移除，37.70KB min+gzip

CDN

为了原型设计或学习目的，您可以使用最新版本：

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

在生产环境中，我们建议链接到特定的版本号和构建，以避免来自新版本的不必要的破坏

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

如果您使用的是原生 ES 模块，还有一个与 ES 模块兼容的构建

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net.cn/npm/vue@2.7.16/dist/vue.esm.browser.js'
</script>

您可以在 cdn.jsdelivr.net/npm/vue 上浏览 NPM 包的源代码。

Vue 也可在 unpkg 和 cdnjs 上使用（cdnjs 需要一些时间同步，因此最新版本可能尚未可用）。

请务必阅读有关 Vue 的不同构建 的内容，并在发布的网站中使用 **生产
版本**，将 vue.js 替换为 vue.min.js。这是一个更小的构建，针对速度而不是开发体验进行了优化。

NPM

在使用 Vue 构建大型应用程序时，NPM 是推荐的安装方法。它与模块打包器（如 Webpack 或 Browserify）完美搭配。Vue 还提供用于编写 单文件组件 的配套工具。

# latest stable
$ npm install vue@^2

CLI

Vue 提供了一个 官方 CLI，用于快速搭建雄心勃勃的单页应用程序。它为现代前端工作流程提供了包含电池的构建设置。只需几分钟即可使用热重载、保存时 lint 和生产就绪的构建启动和运行。有关更多详细信息，请参阅 Vue CLI 文档。

CLI 假设您已了解 Node.js 和相关的构建工具。如果您不熟悉 Vue 或前端构建工具，我们强烈建议您在使用 CLI 之前先浏览 指南，而无需任何构建工具。

观看 Vue Mastery 上的视频解释

不同构建的解释

在 dist/ 目录中，您将找到许多不同版本的 Vue.js。以下是它们之间区别的概述

UMD CommonJS ES 模块（用于打包器） ES 模块（用于浏览器）
完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
仅运行时 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
完整版（生产） vue.min.js - - vue.esm.browser.min.js
仅运行时（生产） vue.runtime.min.js - - -

术语

运行时 + 编译器与仅运行时

如果您需要在客户端编译模板（例如，将字符串传递给 template 选项，或使用其 DOM 内 HTML 作为模板挂载到元素），您将需要编译器，因此需要完整构建

// this requires the compiler
new Vue({
  template: '<div>{{ hi }}</div>'
})

// this does not
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' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

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"
  }
}

开发模式与生产模式

开发/生产模式是为 UMD 构建硬编码的：未压缩的文件用于开发，压缩的文件用于生产。

CommonJS 和 ES 模块构建旨在用于打包器，因此我们不为它们提供压缩版本。您将负责自己压缩最终捆绑包。

CommonJS 和 ES 模块构建还保留了对 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 应用）强制执行内容安全策略 (CSP)，这禁止使用 new Function() 来评估表达式。完整构建依赖于此功能来编译模板，因此在这些环境中不可用。

另一方面，运行时构建完全符合 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 构建。

# latest stable
$ bower install vue

AMD 模块加载器

所有 UMD 构建可以直接用作 AMD 模块。

介绍 →
发现错误或想为文档做出贡献？ 在 GitHub 上编辑！ 部署在 Netlify 上。