vue使用jsx语法开发

Posted 2020-12-07 造轮子

最近遇到这样一个问题：原本用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。