文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

1. Installation（安装）

兼容性说明

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

发行说明

每个版本的详细更新日志都可以在 GitHub 上找到。

Devtools视图

使用 Vue 时，我们建议在您的浏览器中安装 Vue Devtools，使您能够在更方便的在界面中检查和调试 Vue 应用程序。

直接包含<script>

只需下载并包含一个脚本标签，Vue将被注册为全局变量。

在开发过程中不要使用小版本，这样你会略过所有常见错误的警告。

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

生产版本警告消除，30.33KB min + gzip

CDN

建议：https：//cdn.jsdelivr.net/npm/vue，它会在发布到 npm 后立即反映最新版本。你也可以在https://cdn.jsdelivr.net/npm/vue/浏览npm包的源代码。

在unpkg和cdnjs上也可用（cdnjs需要一些时间才能同步，因此最新的版本可能还不可用）。

NPM

使用Vue构建大规模应用程序时，NPM是首选的安装方法。它可以与诸如Webpack或Browserify等模块捆绑器很好地配对。Vue还提供了用于创作单个文件组件的附带工具。

代码语言：javascript
复制
# latest stable
$ npm install vue

CLI

Vue.js提供了一个官方CLI，用于快速搭建雄心勃勃的单页应用程序。它为现代前端工作流程提供电池包含的构建设置。只需几分钟即可启动并运行热重新加载，保存省时和生产就绪版本：

代码语言：javascript
复制
# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

CLI假定了Node.js和关联的构建工具的先前知识。如果您是Vue或前端构建工具的新手，我们强烈建议您在使用CLI之前无需任何构建工具即可阅读本指南。

不同构建的解释

在dist/NPM包的目录中，您会发现许多不同的Vue.js版本。以下是它们之间差异的概述：

​

UMD

CommonJS

ES 模块

Full

vue.js

vue.common.js

vue.esm.js

Runtime-only

vue.runtime.js

vue.runtime.common.js

vue.runtime.esm.js

Full (production)

vue.min.js

-

-

Runtime-only (production)

vue.runtime.min.js

-

-

术语

  • 完整版：包含编译器和运行时的版本。
  • 编译器：负责将模板字符串编译为JavaScript呈现函数的代码。
  • 运行时：负责创建Vue实例，渲染和修补虚拟DOM的代码等等。基本上所有东西都不包括编译器。
  • CommonJS：CommonJS的版本是用于与旧捆扎机像使用 browserify或的WebPack 1。这些bundlers（pkg.main）的默认文件是仅运行时版本的CommonJS build（vue.runtime.common.js）。

运行时+编译器 vs. 仅运行时

如果您需要在客户端上编译模板（例如，将字符串传递给template选项，或者使用其DOM内的HTML作为模板将其挂载到某个元素），则需要编译器以及完整的构建版本：

代码语言：javascript
复制
// 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

代码语言：javascript
复制
module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

Rollup

代码语言：javascript
复制
const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': 'vue/dist/vue.esm.js'
    })
  ]
})

Browserify

添加到您的项目中的package.json：

代码语言：javascript
复制
{
  // ...
  "browser": {
    "vue": "vue/dist/vue.common.js"
  }
}

开发与生产模式

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

CommonJS和ES模块版本适用于捆绑软件，因此我们不提供它们的缩小版本。您将负责自行缩小最终捆绑。

CommonJS和ES Module构建还会保留process.env.NODE_ENV的原始检查，以确定它们应该运行的模式。您应该使用适当的捆绑程序配置来替换这些环境变量，以便控制Vue将运行的模式。process.env.NODE_ENV使用字符串文字替换还允许缩小像UglifyJS完全放弃仅限开发的代码块，减少最终的文件大小。

Webpack

使用Webpack的DefinePlugin：

代码语言：javascript
复制
var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

代码语言：javascript
复制
const replace = require('rollup-plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)

Browserify

将全局envify转换应用于您的包。

代码语言：javascript
复制
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，您必须自己构建它！

代码语言：javascript
复制
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

Bower

Bower只提供UMD版本。

代码语言：javascript
复制
# latest stable
$ bower install vue

AMD模块装载机

所有UMD版本都可以直接用作AMD模块。

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

扫码关注腾讯云开发者

领取腾讯云代金券