本章節(jié)大部分內(nèi)容均摘自官方文檔，目前使用的Vue版本為v2.5.17建議參考官方文檔，更為詳細(xì)。寫本篇文章，只是為完善【Vue入門】系列，此外，關(guān)于如何使用vue-cli3.0搭建一個新項目，以及如何將vue-cli2.0構(gòu)建的項目升級到vue-cli3.0,可以參考Vue-cli 3.0搭建Vue項目

vue.js是什么

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。

兼容性

Vue不支持IE8及以下版本，因為Vue使用IE8無法模擬的ECMAScript5特性。但它支持所有兼容ECMAScript5的瀏覽器
Vue目前最新版本v2.5.17，更新日志請看Github

安裝方式：直接用<script>引入

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

請確認(rèn)了解不同構(gòu)建版本并在你發(fā)布的站點中使用生產(chǎn)環(huán)境版本，把 vue.js 換成 vue.min.js。這是一個更小的構(gòu)建，可以帶來比開發(fā)環(huán)境下更快的速度體驗

安裝方式：命令行工具（CLI）

Vue 提供了一個官方的 CLI，為單頁面應(yīng)用 (SPA) 快速搭建繁雜的腳手架。它為現(xiàn)代前端工作流提供了 batteries-included 的構(gòu)建設(shè)置。只需要幾分鐘的時間就可以運行起來并帶有熱重載、保存時 lint 校驗，以及生產(chǎn)環(huán)境可用的構(gòu)建版本。更多詳情可查閱 Vue CLI 的文檔。

基本的使用，可以參考我的另一篇文章：Vue-cli 3.0搭建Vue項目

對不同構(gòu)建版本的解釋

在 NPM 包的 dist/ 目錄你將會找到很多不同的 Vue.js 構(gòu)建版本。這里列出了它們之間的差別：

術(shù)語

• 完整版：同時包含編譯器和運行時的版本
• 編譯器：用來將模板字符串編譯成為Javascript渲染函數(shù)的代碼
• 運行時：用來創(chuàng)建Vue實例、渲染并處理虛擬DOM等的代碼?；旧暇褪浅ゾ幾g器的其它一切。
• UMD: UMD版本可以通過<script>標(biāo)簽直接用在瀏覽器。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默認(rèn)文件就是運行時 + 編譯器的 UMD 版本 (vue.js)
• CommonJS: CommonJS版本用來配合老的打包工具比如 Browserify 或 webpack 1。這些打包工具的默認(rèn)文件(pkg.main)是只包含運行時的CommonJS版本(vue.runtime.common.js)
• ES Module: ES module 版本用來配合現(xiàn)代打包工具比如 webpack 2 或 Rollup。這些打包工具的默認(rèn)文件 (pkg.module) 是只包含運行時的 ES Module 版本 (vue.runtime.esm.js)。

運行時 + 編譯器 vs. 只包含運行時

// 需要編譯器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要編譯器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

當(dāng)使用 vue-loader 或 vueify 的時候，*.vue 文件內(nèi)部的模板會在構(gòu)建時預(yù)編譯成 JavaScript。你在最終打好的包里實際上是不需要編譯器的，所以只用運行時版本即可。

因為運行時版本相比完整版體積要小大約 30%，所以應(yīng)該盡可能使用這個版本。如果你仍然希望使用完整版，則需要在打包工具里配置一個別名：

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': 'vue/dist/vue.esm.js'
    })
  ]
})

Parcel

在package.json中添加

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

開發(fā)環(huán)境 vs. 生產(chǎn)環(huán)境模式

對于 UMD 版本來說，開發(fā)環(huán)境/生產(chǎn)環(huán)境模式是硬編碼好的：開發(fā)環(huán)境下用未壓縮的代碼，生產(chǎn)環(huán)境下使用壓縮后的代碼。

CommonJS 和 ES Module 版本是用于打包工具的，因此我們不提供壓縮后的版本。你需要自行將最終的包進(jìn)行壓縮。

CommonJS 和 ES Module 版本同時保留原始的 process.env.NODE_ENV 檢測，以決定它們應(yīng)該運行在什么模式下。你應(yīng)該使用適當(dāng)?shù)拇虬ぞ吲渲脕硖鎿Q這些環(huán)境變量以便控制 Vue 所運行的模式。把 process.env.NODE_ENV 替換為字符串字面量同時可以讓 UglifyJS 之類的壓縮工具完全丟掉僅供開發(fā)環(huán)境的代碼塊，以減少最終的文件尺寸。

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