Vue構建工具

目錄

一、單文件組件

二、不同構建版本    1、運行時+編譯器vs.運行時    2、開發環境vs.生產環境模式

三、webpack

---

一、單文件組件

通常使用Vue.component定義全局組件，在頁面中用標籤引入。這種方式在很多中小規模的項目中運作的很好，在這些項目裏JavaScript只被用來加強特定的視圖。但在更復雜的項目中，或前端完全由JavaScript驅動的時候，缺點變得非常明顯：全局定義強制要求每個組件名不得重複；字符串模板缺乏語法高亮；不支持CSS，只有HTML和JavaScript在組件中；沒有構建步驟，限制只能使用HTML和ES5，而不能使用預處理器，如Pug和Babel。

文件擴展名爲.vue的single-file components(單文件組件)實現了完整語法高亮、CommonJS模塊、組件作用域的CSS，還可以使用預處理器來構建簡潔和功能更豐富的組件。

scoped作用域僅在該組件及其子組件（如果是可繼承樣式）生效，未設置時默認是全局。scoped通過CSS的屬性選擇器實現。lang="scss"設置編寫樣式的語言，默認只支持普通樣式，可設置爲less、postcss、sass、scss、stylus。

<template>  <!-- 唯一根元素 -->
  <div>
    <p>{{greeting}} World!</p>

    other-component
  </div>
</template>

<script>
  import OtherComponent from './OtherComponent.vue'

  module.exports={  // 導出一個對象
    data:function(){
      return {
        greeting:'Hello'
      }
    },
    components:{
      OtherComponent
    }
  }
</script>

<style scoped lang="scss">
  div{
    p{
      color:red;
    }
  }
</style>

二、不同構建版本

在node_modules\vue\dist目錄會找到很多不同的Vue.js構建版本。

	UMD	CommonJS	ES Module
完整版	vue.js	vue.common.js	vue.esm.js
只包含運行時版	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
完整版（生產環境）	vue.min.js	-	-
只包含運行時版（生產環境）	vue.runtime.min.js	-	-

運行時：用來創建Vue實例、渲染並處理虛擬DOM等的代碼。基本是除去編譯器的其它一切。

編譯器：用來將模板字符串編譯成爲JavaScript渲染函數的代碼。

完整版：同時包含編譯器和運行時的版本。

UMD：可通過<script>直接用在瀏覽器中。jsDelivr CDN默認文件就是運行時+編譯器的UMD版本vue.js。

CommonJS：用來配合老的打包工具，如Browserify或webpack 1。這些打包工具的默認文件（pkg.main）是隻包含運行時的 CommonJS版本vue.runtime.common.js。

ES module：版本用來配合現代打包工具，如webpack 2或Rollup。這些打包工具的默認文件（pkg.module）是隻包含運行時的 ES Module版本vue.runtime.esm.js。

1、運行時+編譯器vs.運行時

如果你需要在客戶端編譯模板（如傳入一個字符串給template選項，或掛載到一個元素上並以其DOM內部的HTML作爲模板），就需要加上編譯器，即完整版。

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

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

當使用JavaScript內的字符串模板或DOM內的html模板時，模板會在運行時被編譯爲渲染函數。通常情況下這個過程已經足夠快了，但對性能敏感的應用還是最好避免這種用法。使用單文件組件相關的構建設置會自動把模板預編譯處理好，使構建好的代碼已經包含了編譯出來的渲染函數而不是原始的模板字符串。

當使用vue-loader或vueify的時候，*.vue文件內部的模板會在構建時預編譯成JavaScript，最終打好的包裏不需要編譯器，所以只用運行時版本即可。因爲運行時版本相比完整版體積要小大約30%，所以應該儘可能使用這個版本。

2、開發環境vs.生產環境模式

UMD版本：開發環境用未壓縮的代碼，生產環境用壓縮後的代碼。

CommonJS和ES Module版本是用於打包工具的，因此我們不提供壓縮後的版本，需要自行將最終的包進行壓縮。二者同時保留原始的process.env.NODE_ENV檢測，使用適當的打包工具配置來替換這些環境變量以便控制Vue所運行的模式。把process.env.NODE_ENV替換爲字符串字面量同時可以讓UglifyJS之類的壓縮工具完全丟掉僅供開發環境的代碼塊，以減少最終的文件尺寸。

三、webpack

見文章webpack、Vue