在 vue 中使用 jsx

安装 @vue/babel-plugin-jsx 插件,在 babel.config.js 中进行配置相关的文件内容。

module.exports = {
    plugins:[
        "@vue/babel-plugin-jsx"
    ]
}

使用方法：

HelloWorld.js

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    render() {
      return <div>{this.msg}</div>
    }
  }
</script>

<style scoped lang="less">
  div {
    margin: 40px;
  }
</style>

App.js

<script>
  import HelloWorld from '@/components/HelloWorld.vue'

  export default {
    name: 'home',
    render() {
      return <HelloWorld msg="this is helloworld" />
    }
  }
</script>

参考文章

• 在 Vue 中使用 JSX