怎么在 vue3 里面使用 t s x

在 Vue 项目中使用 JSX/TSX 语法

安装必要的依赖：

需要安装 @vue/babel-preset-jsx 或 @vitejs/plugin-vue-jsx（如果你使用 Vite）。你可以通过运行以下命令来安装：

pnpm install @vue/babel-preset-jsx

或者，如果使用 Vite：

pnpm install @vitejs/plugin-vue-jsx

配置 Babel 或 Vite：

如果你使用 Babel，你需要在你的 Babel 配置文件（如 .babelrc）中添加 @vue/babel-preset-jsx：

{
 "presets": ["@vue/babel-preset-jsx"]
}

如果你使用 Vite，你需要在你的 Vite 配置文件（如 vite.config.js）中添加 @vitejs/plugin-vue-jsx：

import vue from "@vitejs/plugin-vue";

import vueJsx from "@vitejs/plugin-vue-jsx";

export default {
  plugins: [vue(), vueJsx()],
};

配置 TypeScript：

在你的 TypeScript 配置文件（如 tsconfig.json）中，你需要在 compilerOptions 下的 jsx 选项设置为 "preserve"。

{

 "compilerOptions": {

  "jsx": "preserve",

 }

}

添加类型声明：

在你的全局类型声明文件（如 shims-tsx.d.ts）中，你需要添加以下代码来为 Vue 的 JSX 元素添加类型声明：

import { DefineComponent } from 'vue';

declare global {

  namespace JSX {

    interface Element extends HTMLElement {}

    interface ElementClass extends DefineComponent<any, any, any, any, any> {}

    interface IntrinsicElements {

      [elem: string]: any;

    }

  }

}

添加全局类型声名文件

完成以上步骤后，你就可以在 Vue 项目中使用 JSX/TSX 语法

效果