在vue中使用jsx

安装

快速搭建vue的webpack开发环境

step 01

yarn add tj-cli global
// or
npm install tj-cli -g

step 02

tj-cli create vue-jsx-demo

step 03

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

step 04

.babelrc配置

{
    "presets": [["env", {
      "modules": false
    }]],
    "plugins":[["@babel/transform-runtime",{
      "corejs": 3
    }],"transform-vue-jsx"]
}

step 05

使用jsx

// main.jsx
import App from './components/App'
export default {
  render() {
    return <App title="h11eee"/>  
  },
}

在cra搭建的开发环境中，可以直接在js文件中编写jsx，但在vue中使用jsx时，不能直接在.js文件中编写jsx，按照上述步骤配置编译会报错，所以main文件的后缀名是jsx而不是js

安装vue相关jsx插件由于版本原因可能会提醒需要安装其他babel插件，如果怕麻烦可以直接安装以下插件npm install babel-plugin-syntax-jsx --save-dev

亲测可用