安装

兼容性

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

更新日志

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

Vue Devtools

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

直接引入 <script> 标签

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

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


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

生产环境版本删除警告,28.96kb min+gzip

CDN

推荐使用:https://unpkg.com/vue,在 npm 发布后,立刻就能够展现最新版本。你还可以在 https://unpkg.com/vue/ 浏览 npm 包的源码。

还可以使用 jsDelivrcdnjs,但是这两个服务需要一段时间才能同步,所以可能会无法获取最新版本。

NPM

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

# 最新稳定版本
$ npm install vue

命令行接口工具

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

# 安装 vue-cli
$ npm install --global vue-cli
# 使用 "webpack" 模板创建一个新项目
$ vue init webpack my-project
# 安装依赖,然后开始!
$ cd my-project
$ npm install
$ 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-loadervueify 时,*.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-loaderBrowserify + 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