vue的template模板在平时写业务代码的时候非常好用,但是很多时候封装vue组件的时候,template就没有那么灵活.
这个时候我们基本上会舍弃他的template模板,直接写render函数去渲染,这个时候要是可以用jsx语法,就会大大简化我们的代码以及提高代码可读性,并且让我们的代码看起来非常优雅.
简单记录一下vue通过babel编译实现在render函数中写jsx的要点:
首先需要安装babel-plugin-transform-vue-jsx
装好后npm会提示你babel-helper-vue-jsx-merge-props没装,所以一起装上.

npm install babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev

如果只装这两个还是会报错,实际上这个插件里面还用到了babel-plugin-syntax-jsx,所以也装上.

npm install babel-plugin-syntax-jsx --save-dev

装完后在.babelrc的plugins添加上:

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

最后记得在webpack的config文件加上对jsx文件的编译

{
  ...,
  module:{
    ...,
    {
      test: /\.jsx$/,
      loader: 'babel-loader'
    }
  }
}

现在就可以跟导入vue文件一样导入jsx文件了.(记得所有用jsx语法的文件用.jsx后缀结尾)