vue3使用jsx的方式
需要安装 @vue/babel-plugin-jsx :yarn add @vue/babel-plugin-jsx 或者 npm i @vue/babel-plugin-jsx
vite.config.js代码更改
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuejsx from "@vue/babel-plugin-jsx"
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),vuejsx({})],
resolve:{
alias:{
"@": `${path.resolve(__dirname, './src')}`
}
},
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
jsxInject: "import { h } from 'vue';"
}
})
1. 新建Hellow.jsx组件 vue3使用jsx参考点击跳转
import { ref } from "vue";
const Hellow = (props, { slots, attrs, emit }) => {
const asd = ref(123);
return <div>{asd.value}</div>;
};
// 定义props特性
Hellow.props = [];
export default Hellow;
2. 用法 在App.jsx里面使用
import Hellow from "./components/hellow";
const App = (props, { slots, attrs, emit }) => {
return <Hellow />;
};
export default App;