首页 > 其他分享 >vue3 类组件装饰器模式配置

vue3 类组件装饰器模式配置

时间:2024-10-31 16:21:05浏览次数:4  
标签:vue render plugin Comp vue3 tsx babel 组件 装饰

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

相关文章

  • 鸿蒙开发:ArkTS SwipeRefresher 组件
    一、基本概念功能概述SwipeRefresher组件在ArkTS5.0中是一种用于实现下拉刷新功能的重要组件。当用户在屏幕上对包含该组件的区域进行下拉操作时,如果下拉的距离和速度满足一定条件,就会触发一个刷新事件,通常用于重新加载数据,如刷新列表内容、获取最新的信息等。用户体......
  • vue3知识点:reactive对比ref
    @目录二、常用CompositionAPI5.reactive对比ref本人其他相关文章链接二、常用CompositionAPI问题:啥叫“组合式API”?答案:请看官方文档:https://v3.cn.vuejs.org/guide/composition-api-introduction.html5.reactive对比ref从定义数据角度对比:ref用来定义:基本类型......
  • vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建
    @目录一、vue2、vue3、vue-cli版本、vue-router版本的关联关系1.说明2.不同版本的vue对应的vue-router版本和vuex版本二、创建Vue3.0工程1.使用vue-cli创建2.使用vite创建一、vue2、vue3、vue-cli版本、vue-router版本的关联关系1.说明1.VueCLI4.5以下,对应的是Vue2;Vue......
  • Vue组件化-插槽Slot
    认识插槽Slot如何使用插槽slot?插槽的默认内容多个插槽的效果具名插槽的使用◼事实上,我们希望达到的效果是插槽对应的显示,这个时候我们就可以使用具名插槽:具名插槽顾名思义就是给插槽起一个名字,<slot>元素有一个特殊的attribute:name;一个不带name的slot,会带有隐......
  • Vue3+Elementplus+Univer-Sheet实现在线excel及其需要注意的点
    1、准备项目环境Vue3自行准备node.js环境2、ElementPlus官网官网安装教程自行参照官网3、Univer插件官网1)官网网址2)开始直接点击GetStarted侧边栏点击  后面直接按照教程走即可 4、配置插件需要注意如果上述插件包已经下载并成功引入vue......
  • 学习高校课程-软件设计模式-组合模式、装饰器模式和外观模式(lec7)
    原文链接Composite:ProblemUsingtheCompositepatternmakessenseonlywhenthecoremodelofyourappcanberepresentedasatree.仅当应用程序的核心模型可以表示为树时,使用复合模式才有意义。Forexample,imaginethatyouhavetwotypesofobjects:Products......
  • 微信小程序 video 组件高度自适应实现
    偶然发现微信小程序的video无法像Image对象那样设置mode='widthFix'实现宽度100%高度自适应尝试了各种网上的方案都不可行。要实现高度自适应需要2个条件:知道视频的真实宽,高设置css的aspect-ratio与height在小程序内上传视频调用wx.chooseMedia获取视频......
  • vue3知识点:响应式数据的判断
    @目录三、其它CompositionAPI(不常用,了解即可)6.响应式数据的判断测试案例完整代码本人其他相关文章链接三、其它CompositionAPI(不常用,了解即可)6.响应式数据的判断测试案例完整代码项目目录main.js//引入的不再是Vue构造函数了,引入的是一个名为createApp的工......
  • springboot 整合 activiti 搭配 vue3 element-plus activiti-modeler bpmn-js
    springboot整合activiti搭配vue3element-plusactiviti-modelerbpmn-js配合使用ElementPlus+Vue3(idea开发,需要安装lombok插件)相关依赖版本后台:依赖版本spring-boot2.7.18knife4j-spring-boot-starter3.0.3pagehelper-spring-boot-starter1.3.0......
  • 实现.NET 4.0下的Task类相似功能组件
    实现.NET4.0下的Task类相似功能:TaskExCum组件详解引言随着.NET技术的发展,异步编程模型逐渐成为现代应用程序开发中的标准实践之一。.NET4.5引入了Task类,极大地简化了异步编程的过程。然而,许多遗留系统仍在使用.NET4.0或更低版本,这些版本并未直接支持Task类的全......