兼容性
vue不支持IE8及以下版本,因为vue使用了IE8无法模拟的ECMAScript特性,但它兼容所有ECMAScript5的浏览器
vue Devtools
使用vue时,推荐在浏览器安装vue Devtools,它允许在更好的界面调试和审查vue程序
直接使用< script>引用
开发版本 包含完整的警告和调试模式
生产版本 删除了警告
#CDN
对于原型制作或学习,可以这样使用最新版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
对于生产环境需要明确到对应的版本和构建文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
如果使用原生ES Modules,这里有兼容原生ES Modules的构建
<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>
可以在cdn.jsdelivr.net/npm/vue上浏览NPM包的源代码
NPM
在用vue构建大型应用时推荐使用NPM安装,NPM能很好的和诸如 webpack 或 Browserify 等打包器配合使用,同时vue也提供配套工具来开发单文件组件
#最新版本
$ npm install vue
命令行工具(CLI)
Vue提供了一个官方的CLI,为单页面应用(SPA)快速搭繁杂的建脚手架,为现在前端工作流提供了batteries-included 的构建设置,并带有热重载,保存时lint校验,以及生产环境可用的构建版本,
对不同构建版本的解释
在NPM包的dist目录包含很多不同vue.js构建版本,
UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) | |
---|---|---|---|---|
完整版 | 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 | - | - | - |
#术语
- 完整版:同时包含编译器和运行时的版本。
- 编译器:将模板字符串编译为javaScript渲染函数的代码
- 运行时:用来创建vue实例。渲染并处理虚拟DOM等代码。基本就是除去编译器的一切
- UMD:UMD版本可以通过 < script> 标签直接用在浏览器中,
- CommonJs:CommonJs版本用来配合老的打包工具比如 Browserify 或 webpack 1。
- ES Module:从2.6开始会提供两个ES Module(ESM)构建文件
- 为打包工具提供的ESM:为诸如 webpack 2 或 Rollup 提供的现代打包工具。ESM 格式被设计为可以被静态分析,所以打包工具可以利用这一点来进行“tree-shaking”并将用不到的代码排除出最终的包。
- 为浏览器提供的 ESM (2.6+):用于在现在浏览器中使用
<scrtpt type="module">
直接导入
#运行时 + 编译器 vs. 只包含运行时
若你需要在客户端编译模板选项(比如传入字符串到template,或挂载到一个元素上的并以其DOM内部的html作为模板)就需要编译器:
//需要编译器
new Vue({
template:"<div>{{hi}}</div>"
})
//不需要编译器
new Vue({
render(h){
return h("div",this.hi)
}
})
当使用 vue-loader 或 vueify 的时候, x.vue 文件内部的模板都会在构建时预编译成javascript,在最终打好的包实际上是不需要预编译的,只用运行时版本就可以。
因为运行时版本比完整版要小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': 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"
}
}
#开发环境vs生产环境
对于UMD版本来说,开发环境/生产环境模式都是硬编码好的,开发环境用未压缩的代码,生产环境用压缩后的代码
CommonJs和ES Module版本是用于打包工具的,因此不提供压缩版本
CommonJs和ES Module同时保留原始的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')
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 Apps,会强制应用内容安全策略 (CSP),不能使用 new Function() 对表达式求值。这时可以用 CSP 兼容版本。完整版本依赖于该功能来编译模板,所以无法在这些环境下使用。
另一方面,运行时版本则是完全兼容 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 版本。
# 最新稳定版本
$ bower install vue
AMD模块加载
所有 UMD 版本都可以直接用作 AMD 模块。