vue3+vite+tsx 配置及使用

在Vue 3中使用TSX，首先需要确保你的项目配置了对应的支持。以下是配置和使用TSX的步骤：

1. 创建或更新你的Vite配置文件（如vite.config.ts），确保配置了对TypeScript的支持，并启用了JSX支持。

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
  jsx: {
    factory: 'h',
    fragment: 'Fragment',
    prop: 'props',
    event: 'emit',
  },
});

2. 确保你的TypeScript配置文件（如tsconfig.json）中启用了JSX。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "moduleResolution": "node",
    // ... 其他配置
  },
  // ... 其他配置
}

3. 安装所需的依赖，确保你已经安装了@vue/babel-preset-jsx或者对应的插件，如@vue/babel-plugin-jsx。

npm install @vue/babel-preset-jsx
# 或者
npm install @vue/babel-plugin-jsx

4. 创建一个.tsx文件，并在Vue组件中使用TSX语法编写你的组件。

// MyComponent.tsx
import { defineComponent } from 'vue';
 
const MyComponent = defineComponent({
  name: 'MyComponent',
  props: {
    text: String,
  },
  setup(props) {
    return () => (
      <div>
        <h1>{props.text}</h1>
      </div>
    );
  },
});
 
export default MyComponent;

5. 在Vue组件中导入并使用TSX组件。

<script lang="ts">
import MyComponent from './MyComponent.tsx';
 
export default {
  components: {
    MyComponent,
  },
};
</script>
 
<template>
  <MyComponent text="Hello TSX" />
</template>

确保你的Vue项目已经支持了TypeScript，并且所有的配置都已经正确设置。上述步骤将帮助你在Vue 3 + Vite + TypeScript项目中使用TSX。