兼容性

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-loadervueify 的时候, 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 模块。

最后修改:2019 年 04 月 15 日
如果觉得我的文章对你有用,请随意赞赏