让vue工程支持jsx语法

vue-cli3搭建的工程vue工程默认是支持jsx语法的。我这里写的是手动搭建vue工程的支持jsx语法。为什么要支持jsx语法呢？因为有些第三方组件在扩展某些显示时需要使用createElement方法进行扩展。手写creactElement创建虚拟节点时简单的还好，但是遇到复杂逻辑或者大量的虚拟节点时就有点力不从心了。所以此时就需要jsx语法登场。

直接上代码。首先先安装babel的一些插件如下

• babel-helper-vue-jsx-merge-props
• babel-plugin-syntax-jsx
• babel-plugin-transform-vue-jsx
• babel-preset-es2015

npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-preset-es2015 -D

安装完上述插件后，修改.babelrc文件

{
    "presets": [["es2015"]],
    "plugins": ["transform-vue-jsx",]
}

综上就可以在vue文件中使用jsx语法糖了。