安装

兼容性

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

更新日志

每个版本的更新日志见 GitHub

直接 <script> 引入

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。

开发环境不要用最小压缩版,不然就失去了错误提示和警告!


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

生产版本删除了警告,28.03kb min+gzip

CDN

推荐:https://unpkg.com/vue, 会保持和 npm 发布的最新的版本一致。可以在 https://unpkg.com/vue/浏览 npm 包资源。

也可以从 jsDelivrcdnjs获取,不过这两个服务版本更新可能略滞后。

NPM

在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 WebpackBrowserify 模块打包器配合使用。 Vue.js 也提供配套工具来开发单文件组件

# 最新稳定版
$ 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 本身之后再研究 CLI。

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

Explanation of Different Builds

In the dist/ directory of the NPM package you will find many different builds of Vue.js. Here’s an overview of the difference between them:

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
Full (production) vue.min.js - -
Runtime-only (production) vue.runtime.min.js - -

Terms

独立构建 vs 运行时构建

If you need to compile templates on the fly (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:

// this requires the compiler
new Vue({
template: `<div>{{ hi }}</div>`
})
// this does not
new Vue({
render (h) {
return h('div', this.hi)
}
})

When using vue-loader or vueify, templates inside *.vue files are pre-compiled into JavaScript at build time. You don’t really need the compiler in the final bundle, and can therefore use the runtime-only build.

Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can. If you still wish to use the full build instead, you need to configure an alias in your bundler:

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': 'vue/dist/vue.esm.js'
})
]
})

Browserify

Add to your project’s package.json:

{
// ...
"browser": {
"vue": "vue/dist/vue.common.js"
}
}

Development vs. Production Mode

Development/production modes are hard-coded for the UMD builds: the un-minified files are for development, and the minified files are for production.

CommonJS and ES Module builds are intended for bundlers, therefore we don’t provide minified versions for them. You will be responsible for minifying the final bundle yourself.

CommonJS and ES Module builds also preserve raw checks for process.env.NODE_ENV to determine the mode they should run in. You should use appropriate bundler configurations to replace these environment variables in order to control which mode Vue will run in. Replacing process.env.NODE_ENV with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, reducing final file size.

Webpack

Use Webpack’s DefinePlugin:

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

Rollup

Use rollup-plugin-replace:

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

Browserify

Apply a global envify transform to your bundle.

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

Also see Production Deployment Tips.

CSP 环境

有些环境,如 Google Chrome Apps ,强制应用内容安全策略 (CSP) ,不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。完整的构建取决于该功能编译模板,所以无法使用这些环境。

另一方面,运行时构建的是完全兼容 CSP 的。当通过 Webpack + vue-loader 或者 Browserify + vueify 构建时,在 CSP 环境中模板将被完美预编译到 render 函数中。

开发版本

重要: 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

Only UMD builds are available from Bower.

# 最新稳定版本
$ bower install vue

AMD 模块加载器

独立下载版本或通过 Bower 安装的版本已用 UMD 包装,因此它们可以直接用作 AMD 模块。


原文:http://vuejs.org/guide/installation.html