在Vue3中使用class component、注解和TSX！

一、安装vue-facing-decorators

vue-facing-decorators文档

yarn add -D vue-facing-decorator @rollup/plugin-babel @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties vite-plugin-babel

• vite.config.ts配置

import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
 plugins: [
   vueJsx({
     babelPlugins: [
       ["@babel/plugin-proposal-decorators", { "legacy": true }],
       ["@babel/plugin-proposal-class-properties", { "loose": true }]
     ]
   }),
   babel({
     babelHelpers: 'bundled',
     extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
     plugins: [
       ["@babel/plugin-proposal-decorators", { "legacy": true }],
       ["@babel/plugin-proposal-class-properties", { "loose": true }]
     ]
   })
 ]
})

二、使用vue-facing-decorators

// Comp.render.tsx
import { Component, toNative } from "vue-facing-decorator"

export default function render () {
 return <></>
}

// Comp.ts
import { Component, toNative } from "vue-facing-decorator"
import render from "./Comp.render.tsx"

@Component({
 render
})
class Comp extends Base {}

export default toNative(Comp)