VUE - VUE3使用tsx

VUE - VUE3使用tsx

 

Vue 官方提供了一个插件 @vitejs/plugin-vue-jsx 来支持 JSX 语法。以下是使用该插件的具体步骤：

 

1. 安装插件：

   使用 npm 或 yarn 安装 @vitejs/plugin-vue-jsx。

    

   npm install @vitejs/plugin-vue-jsx --save-dev

    

    

2. 配置 Vite：

   在 vite.config.js 文件中添加插件配置。

    

   import { defineConfig } from 'vite';
    
   import vue from '@vitejs/plugin-vue';
   
   import vueJsx from '@vitejs/plugin-vue-jsx';
   
   export default defineConfig({
   
   plugins: [vue(), vueJsx()]
   
   });

    

    

   1. 编写 JSX 组件：

      现在你可以在 Vue 组件中使用 JSX 语法。例如： 

      import { defineComponent } from 'vue';
      export default defineComponent({
      render() {
      　　return <div>Hello, JSX with Vite!</div>;
      }
      });

       

       

 

如果项目用 TypeScript，则在 tsconfig.json 中配置：

 

{
  "compilerOptions": {
    "jsx": "preserve"
  }
}

 

这个插件的优势在于与 Vite 紧密集成，提供更快的开发体验和更简洁的配置。

 

 

引用：https://worktile.com/kb/p/3604046