怎么在 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 语法
效果