Vue中使用jsx

1. jsx的babel配置

1.1 在项目中使用jsx，需要添加对jsx的支持：

jsx通常会通过Babel来进行转换(React编写的jsx就是通过babel转换的)
Vue中，只需要在Babel中配置对应的插件即可

以下列举需要支持转换的案例：

  template -> vue-loaderrender -> 不需要转换jsx -> babel(es6 -> es5、ts -> js、jsx -> js) -> render

2. vue-cli中安装jsx插件及配置

2.1. 安装babel支持Vue的jsx插件(vue-cli)：

npm install @vue/babel-plugin-jsx -D

2.2. 在babel.config.js配置文件中配置插件：`"@vue/babel-plugin-jsx"`

   module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: [["@vue/babel-plugin-jsx",]]}

3. Vite环境中安装jSX插件及配置：

3.1. 安装jSX插件：

npm install @vitejs/plugin-vue-jsx -D

3.2. 在vite.config.js配置文件中配置插件：`@vitejs/plugin-vue-jsx`

   import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// 导入jsx插件import jsx from '@vitejs/plugin-vue-jsx'import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/export default defineConfig({plugins: [vue(),// 添加jsx插件jsx(),vueDevTools(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},})

3.3. 使用jsx语法

3.3.1. Options API中使用

script标签中配置lang=“jsx”
render函数中return jsx语法

具体代码如下；

<script lang="jsx">import About from './About.vue'export default {data  () {return {count: 0}},render () {return (<div class='app'>{/* 只要使用js语法，统一使用大括号 */}<h2>当前计数：{ this.count }</h2><button onClick={this.increment}> +1 </button><button onClick={this.decrement}> -1 </button><p>我是内容，哈哈哈哈</p>{/* 使用组件 */}<About /></div>)},methods: {increment () {this.count++},decrement () {this.count--}}}
</script><style lang="less" scoped></style>

3.3.2. compositionApi的实现方式

setup函数中

  <script lang="jsx">import { ref } from 'vue';import About from './About.vue';export default  { setup () {const counter = ref(0)const increment = () => {counter.value++}const decrement = () => {counter.value--}return () => (<div class='app'><h2>当前计数 ：{ counter.value } </h2><button onClick={ increment }>+1</button><button onClick={ decrement }>-1</button><About /></div>)}}</script>

setup语法糖中使用

定义jsx函数

<script lang="jsx" setup>import { ref } from 'vue';import About from './About.vue';const counter = ref(0)const increment = () => {counter.value++}const decrement = () => {counter.value--}const jsx = () => (<div class='app'><h2>当前计数 ：{ counter.value } </h2><button onClick={ increment }>+1</button><button onClick={ decrement }>-1</button><About /></div>)
</script>