vue3+ts+vite 项目支持tsx的配置步骤

Vue 3 + TypeScript + Vite 项目支持 TSX 的配置步骤

要在 Vue 3 + TypeScript + Vite 项目中使用 TSX，需要按照以下步骤进行配置：

1. 创建项目（如已有项目可跳过）

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app

2. 安装必要依赖

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

3. 配置 vite.config.ts

修改 vite.config.ts 文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(), // 添加 JSX 插件
  ],
})

4. 配置 tsconfig.json

确保 tsconfig.json 中包含以下配置：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "preserve",
    "jsxImportSource": "vue",
    "jsxFactory": "h",
    "jsxFragmentFactory": "Fragment",
    "include": [ "vite.config.ts","src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*","src/**/*.d.ts"]
  }
}

5. 创建 TSX 组件示例

创建一个 .tsx 文件，例如 src/components/HelloWorld.tsx：

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  setup(props) {
    return () => (
      <div>
        <h1>{props.msg}</h1>
      </div>
    )
  }
})

6. 在 Vue 组件中使用 TSX 组件

在 .vue 文件中使用刚才创建的 TSX 组件：

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.tsx'
</script>

<template>
  <HelloWorld msg="Hello Vue 3 + TSX + Vite" />
</template>

7. 可选：全局 JSX 类型定义

在 src 目录下创建 shims-tsx.d.ts 文件：

import { VNode } from 'vue'

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass {
      $props: {}
    }
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

8. 运行项目

npm run dev

注意事项

1. 在 TSX 中，Vue 指令（如 v-model、v-if）需要使用不同的语法：

   • v-model 改为 v-model={value}
   • v-if 改为使用三元运算符或逻辑与 &&
   • v-for 改为使用数组的 map 方法

2. 事件监听使用 onClick 而不是 @click

3. 属性传递使用 props={value} 而不是 :prop="value"

完成以上配置后，你的 Vue 3 + TypeScript + Vite 项目就可以支持 TSX 语法了。