vue3配置jsx

2022-07-10

前端

正如自然忌讳真空一样,人类是讨厌平等的。——《我是猫》

首先按照官方文档创建项目:

1
npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue

然后我们安装jsx插件:https://github.com/vuejs/babel-plugin-jsx

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

然后配置vite.config.js

1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuejsx from "@vue/babel-plugin-jsx"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(), vuejsx({})],
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
jsxInject: "import { h } from 'vue';"
}
})

编写代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script lang="tsx">
interface Props {
msg: string;
}
import { ref, Ref, } from 'vue'
export default {
props: {
msg: {
type: String
}
},
setup(props: Props, { expose }) {
const count: Ref<number> = ref(0)
const increment = (event: MouseEvent) => ++count.value
expose({
increment
})
return () => (
<div>
<div>{props.msg}</div>
<p>You clicked {count.value} times</p>
<button onClick={increment}>Click me</button>
</div>
)
}
}
</script>

<style scoped>
a {
color: #42b983;
}
</style>

查看效果:

image-20220710172025713