Vue | 01 安装

对于兼容性解释

Vue不支持IE8和以下的浏览器，因为它所使用的ECMAScript 5的特性在IE8是不可调的，然而它支持所有兼容ECMAScript 5的浏览器。

Vue 开发工具

Vue推荐在浏览器中使用 Vue Devtools，可以使你检查和调试Vue界面更加友好。

如何在Chrome中安装Vue Devtools

下载链接：Get the Chrome Extension (beta)

1. 在Chrome浏览器点击以上链接，点击如下Add to Chrome按钮即可。
   
2. 询问权限，点击添加扩展程序，即可安装完成。
   
3. 打开浏览器的开发者工具选项，找到Vue调试。
   

   Vue调试工具界面快捷键注解：

   Command + 1: 切换到组件

   Command + 2: 切换到Vuex

   Command + 3：切换到Events

   Command + ⇧ + R： 强制刷新

直接用script标签导入

简单地下载并用script标签导入，Vue将被注册为一个全局变量。

在开发环境不要使用压缩版本，否则将丢失掉常见错误的警告！

Development Version：拥有完整的警告和调试模式

Prodution Version：警告被去除，30.90KB min+gzip

CDN

我们推荐链接到一个具体的版本号以便你能够手动更新

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

在cdn.jsdelivr.net/npm/vue浏览NPM包的源代码。

Vue在 unpkg 和 cdnjs 获取（cdnjs需要一些时间同步所以最新的版本可能还没有）。

确保你读了关于 Vue的不同构建版本 和使用生产版去发布你的网站，用vue.min.js去替换vue.js.这是一个为了速度而不是为了开发体验而优化的更小的构建。

NPM

使用Vue构建更大级别的应用推荐使用NPM的安装方法，因为它对 Webpack 或 Browserify等模块配对更友好。Vue也提供了用于编写单独文件组件的工具 Single File Components。

// 最新的稳定版
$ npm install vue

CLI

命令行工具CLI（Command Line Interface）

Vue提供了一个官方的CLI official CLI 为快速构建理想的单页面应用（SPA）。 它提供了batteries-included的安装设置为一个现代化的前端工作流，它只需要几分钟就可以运行起来，并带有热重载，保存时lint校验,以及生产环境可用的构建版本。对于更详细的查看the Vue CLI docs 。

CLI假定你掌握了一些Node.js的知识和相关的构建工具，如果你是vue或前端新手，我们强烈建议你在使用CLI之前，在不使用任何构建工具的情况下通读指南the guide，而后再使用CLI。

不同版本的解释

在dist/ （directory of the NPM package）目录下，你会发现不同的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
Full (production)	vue.min.js	-	-
Runtime-only (production)	vue.runtime.min.js	-	-

术语解释

• Full-完整版：同时包含编译器和运行时版本
• Compiler-编译器：代码负责将模板字符串编译成JavaScript渲染函数的代码。
• Runtime-运行时：代码负责创建Vue实例，渲染和修补虚拟的DOM，例如：基本上是剪掉了编译器的所有东西。
• UMD：UMD的版本能够通过script标签在浏览器中直接使用，在jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件是Runtime + Complier UMD版本（vue.js）。
• CommonJS: CommonJS是为了与老的打包工具一起使用像browserify或webpack 1.这些打包器（pkg.main）的默认文件是只包含运行时的CommonJS 版本（vue.runtime.common.js）。
• ES Module:ES module版本 是为了与现代化的打包器一起使用，比如webpack 2 或 rollup。这写打包器（pkg.main）的默认文件是只包含运行时的ES Module 版本（vue.rutime.esm.js）。

Runtime + Compiler（运行时 + 编译器） vs. Runtime-only（只包含运行时）

如果你需要在客户端编译模板（e.g.传入一个字符串给template选项），或挂载到一个元素使用DOM内部的 HTML作为模板，你将需要编译器，因此需要完整版：

// 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里，在最终打好的包中并不需要编译器，因此使用只含运行时的版本。

由于只含runtime的版本比完整的版本小了30%，无论何时只要可能尽量使用它，如果你仍然希望使用全的版本替代，你需要在你的打包器配置一个别名。

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

添加到你的项目的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

Use rollup-plugin-replace:

const replace = require('rollup-plugin-replace')

rollup({
  // ...
  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

也可以看生产环境部署建议 Production Deployment Tips.

CSP 环境

有些环境，像Google Chrome Apps，会强制执行内容安全协议 Content Security Policy（CSP），禁止使用new Function() 来为表达式求值。完整版依赖这个特性去编译模板，所以这些环境是不可用的。

另一方面，只含运行时的版本完全兼容CSP，当使用 Webpack + vue-loader 或 Browserify + vueify的时候,你的模板将会被预编译为render函数，一组在CSP环境下完美工作的函数。

开发版本

重要：在GitHub上的/dsit文件夹的构建文件只在版本发布后提交，为了使用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版本。

# latest stable
$ bower install vue

AMD 模块加载器

所有的UMD版本能够被直接用作AMD模块。

---

参考：
vue official guide