让vue支持jsx，更灵活的写组件，需要配置好支持jsx的开发环境哦。

1. 首先安装开发依赖项

$ cnpm i -D babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx

2. 然后配置.babelrc文件

将transform-vue-jsx加入到plugins配置项当中。变为

"plugins": ["transform-runtime", "transform-vue-jsx"]

3. 在.vue文件中使用jsx

<script>
import MyHeader from './MyHeader'
import MyFooter from './MyFooter'
import SideNav from './SideNav'

export default {
  components: { MyHeader, MyFooter, SideNav },
  render (h) {
    return (
      <div>
        <my-header/>
        <div class="flex">
          <side-nav/>
          <div class="app-main">
            { this.$slots.default }
            <my-footer/>
          </div>
        </div>
      </div>
    )
  }
}
</script>

好了，现在支持jsx了，享受在js中书写html的快乐和自由吧。

4. 组件小技巧

一般对vue来讲，自定义的组件都是以小写开头的，然后它需要被注册到vue的组件序列中，而假设这个自定义的组件本身是以大写开头呢，他就会作为是一个标识，那么被import进来后，不用被注册到vue组件的components选择的中啦。例如下面的代码：

import Todo from './Todo.js'

export default {
  render (h) {
    return <Todo/> // no need to register Todo via components option
  }
}

更多，参考https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage