vue使用jsx語法開發

最近遇到這樣一個問題：原本用vue-cli2創建的項目，需要用vue-cli3重構。入口文件聲明實例時候，使用的是render模式，而不是模板template。

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

而在我們原有的項目中，一些封裝的組件必須使用template這個字段。然后發現在vue-cli3給出使用template的警告。然而，切換為template模式之后，組件就不能用了。

而使用render替代template因為模板代碼比較多，導致寫起來非常麻煩。

慶幸的是，最后終於發現了jsx方案：

用jsx代替template，發現轉換非常方便。

具體使用jsx的語法，可以參考babel-plugin-transform-vue-jsx插件。

總結一下：Vue寫模板的方式有render、template和jsx。