在使用vue cli2 建立vue專案中會有一項Vue build選項，如圖：

下面來具體說下這兩種方式建立vue專案的區別：

第一：我們先從字面意思理解：

方式一使用runtime compiler 建立的vue專案是推薦給大多數使用者的。

方式二使用runtime only建立vue專案，它創建出的專案比第一種少6KB，打出的包比第一種更小更輕。

第二：我們從創建出的程式碼解讀來思考：

方式一創建出main.js的程式碼片段

new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
});
 

方式二創建出main.js的程式碼片段

new Vue({
  el: '#app',
  render: h => h(App)
});

這裡需要補充一下vue程式執行過程：首先將template解析---->成AST(抽象語法樹)---->再編譯為render函式----->再將render函式翻譯為虛擬DOM----->再轉成真實DOM樹最後渲染到UI；

方式一：首先將template解析---->成AST(抽象語法樹)---->再編譯為render函式----->再將render函式翻譯為虛擬DOM----->再轉成真實DOM樹最後渲染到UI；

方式二：將編譯為render函式----->再將render函式翻譯為虛擬DOM----->再轉成真實DOM樹最後渲染到UI；

從程式碼塊可以看出方式二在渲染時所需執行過程比較短，少了從template到AST的轉換，那麼是誰將我們方式二中的元件App進行解析呢？

在使用webpack編譯.vue檔案時，你可能會安裝 vue-loader和vue-template-compiler 這兩個外掛，那麼，方式二中的App元件裡面的template會交給vue-template-compiler進行解析和編譯。

所以在開發中如果使用 vue cli2 建立專案，推薦你選用方式二，因為他編譯出的程式碼不僅簡單，而且高效。