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)
  }
})

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