Vue 安装

Vue 版本

Paste_Image.png

• 完整版：同时包含编译器和运行时的构建。

• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。

• 运行时：用来创建 Vue 实例，渲染并处理 virtual DOM 等行为的代码。基本上就是除去编译器的其他一切。

• UMD：UMD 构建可以直接通过 <script>
  标签用在浏览器中。Unpkg CDN 的 https://unpkg.com/vue 默认文件就是运行时 + 编译器的 UMD 构建 (vue.js
  )。

• CommonJS：CommonJS 构建用来配合老的打包工具比如 browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main
  ) 是只包含运行时的 CommonJS 构建 (vue.runtime.common.js
  )。

• ES Module：ES module 构建用来配合现代打包工具比如 webpack 2 或 rollup。这些打包工具的默认文件 (pkg.module
  ) 是只包含运行时的 ES Module 构建 (vue.runtime.esm.js
  )。

Vue安装

直接<script>中引入

• 下载使用UMD,直接通过 <script>标签用在浏览器中
• 使用CDN 的 https://unpkg.com/vue 默认文件就是运行时 + 编译器的 UMD 构建 (vue.js)。

NPM

在用 Vue.js 构建大型应用时推荐使用 NPM 安装， NPM 能很好地和诸如 Webpack 或 Browserify 模块打包器配合使用。

# 最新稳定版
$ npm install vue

vue-cli

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

使用vue-cli时，当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，因为只是用运行时构建即可。

如果你需要线上编译模板 (比如传入一个字符串的 template 选项，或挂载到一个元素上并以其内部的 HTML 作为模板)，你将需要加上编译器，即使用完整版的构建：

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

你需要在你的打包工具里配置