2024年10月31日
vue3 支持装饰器模式插件
借助插件vue-facing-decorator实现类组件装饰器转换
npm install --save-dev vue-facing-decorator @rollup/plugin-babel @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
vite.config.ts配置
// 第一种 支持装饰器模式逻辑与模版写在同一个tsx文件内一起解析
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 }]
]
}),
]
})
// 第二种 支持装饰器模式逻辑与模版分离 进行解析
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [
babel({
babelHelpers: 'bundled',
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
plugins: [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
})
]
})
配置详解
两种配置对应的组件文件情况如下:
// 第一种
// Comp.tsx
import { Component, toNative } from "vue-facing-decorator"
function render () {
return <></>
}
@Component({
render
})
class Comp extends Base {}
export default toNative(Comp)
// 第二种
// 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)
第二种tsx文件命名方式要重命名为Comp.xxxx.tsx,否则会报错,不知是何原因?
标签:vue,render,plugin,Comp,vue3,tsx,babel,组件,装饰 From: https://www.cnblogs.com/lastkiss/p/18518172