vue2 组件库之vetur提示

news2025/1/12 18:11:09

当我们开发完自定义UI组件库后,在项目中使用时,想要达到以下提示效果,组件提示与属性提示,有什么解决方案呢:

 事实上,这是vetur的功能,原文如下:

Component Data | Vetur

If a package listed in dependencies has a vetur key in its package.json, then Vetur will try to read the tags / attributes specified by that key.

{
  "vetur": {
    "tags": "dist/vetur/tags.json",
    "attributes": "dist/vetur/attributes.json"
  }
}

By bundling the tags / attributes definitions together with the framework library, you ensure that users will always get the matching tags / attributes with the specific version of your library they are using.

我的步骤如下:

1、package.json

"vetur": {
    "tags": "./vetur/tags.json",
    "attributes": "./vetur/attributes.json"
  }

2、tags.json

{
  "Card": {
    // description放在首位,否则无法识别
    "description": "这是一个全新的筛选框架组件",
    // "slotTip", "emitTip" 扩展slot与emit,这两个不在props中。
    "attributes": ["type","slotTip", "emitTip"]
  }
}

3、attributes.json

{
  "type": {"description": "类型"},
  "slotTip": {"description": "包含以下slot:title、content"},
  "emitTip": {"description": "包含以下Events:query(説明:插槽searchInput的@keyup.enter.native的事件)"}
}

 发布npm,项目更新私库(有时需要重启vscode)之后,便可以了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/945188.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RT_Thread内核机制学习(六)信号量

要传输较大数据时,使用队列。 传输较小数值时,使用邮箱。 队列、邮箱用来传递数据。 如果只是用来传递资源的个数,可以使用信号量。 A车与B车只需要传递信号量(代表资源)。 信号量 获取信号量 如果value>0&…

PDF可以修改内容吗?有什么注意的事项?

PDF是一种跨平台的电子文档格式,可以在各种设备上轻松阅读和共享。许多人喜欢将文档转换为PDF格式以确保格式的一致性和易读性。但是,PDF文件一般被认为是“只读”文件,即无法编辑。那么,PDF文件是否可以修改呢? 答案是…

CCF HPC China2023|澎峰科技:使能先进计算,赋能行业应用

CCF HPC China2023圆满落幕! 桂秋八月,为期三天的中国高性能计算领域最高规格盛会——2023CCF全球高性能计算学术年会(HPC China)在青岛红岛国际展览中心圆满落幕。行业超算大咖、顶级学界精英、先锋企业领袖参会者齐聚山东青岛&a…

photoshop2022安装教程

安装教程 点击set-up.exe 点击确认,开始安装,需要等待一段时间 出现这个表示安装成功,点击关闭即可 查看版本:打开菜单栏中的“帮助”选项,点击"系统信息" 成功演示 安装包下载 https://ziby0nwxdov.feishu.…

VMware vCenter Server 7.0.3 安装

VMware vCenter Server 7.0.3 安装 文章目录 VMware vCenter Server 7.0.3 安装1. 安装 vcenter1.1 第一阶段1.2 第二阶段 2. exsi 查看 vcenter3. 部署 DNS server3.1 安装 unbound3.2 配置 unbound3.3 vcenter 配置域名访问 1. 安装 vcenter 1.1 第一阶段 双击 192.168.2…

从零开始探索C语言(一)----C语言程序结构、基本语法与数据类型

文章目录 1. 程序结构1.1 Hello World示例1.2 编译并执行C程序 2. 基本语法2.1 C 标记2.2 分号2.3 注释2.4 标识符2.5 关键字2.6 C中的空格 3. 数据类型3.1 整数类型3.2 浮点类型3.3 void类型 从第一次学习C语言到现在已经时隔五年了,大部分知识都还给老师了&#x…

C++day7(封装一个学生的类,定义一个学生这样类的vector容器, 里面存放学生对象【保存+读取】、实现与list相关的函数 )

1.封装一个学生的类&#xff0c;定义一个学生这样类的vector容器, 里面存放学生对象 再把该容器中的对象&#xff0c;保存到文件中。&#xff08;至少3个&#xff09; 再把这些学生从文件中读取出来&#xff0c;放入另一个容器中并且遍历输出该容器里的学生。 #include <…

STM32f103入门(5)定时器中断

STM32 TIM&#xff08;定时器/计数器&#xff09;模块的中断流程如下&#xff1a; 配置TIM寄存器&#xff1a;首先&#xff0c;通过配置TIM相关的寄存器来设置计时器的基本参数&#xff0c;例如预分频系数、计数模式、计数器周期等。 使能TIM中断&#xff1a;使用TIM_ITConfig函…

时序预测 | MATLAB实现基于QPSO-BiLSTM、PSO-BiLSTM和BiLSTM时间序列预测

时序预测 | MATLAB实现基于QPSO-BiLSTM、PSO-BiLSTM和BiLSTM时间序列预测 目录 时序预测 | MATLAB实现基于QPSO-BiLSTM、PSO-BiLSTM和BiLSTM时间序列预测效果一览基本描述程序设计参考资料 效果一览 基本描述 1.Matlab实现QPSO-BiLSTM、PSO-BiLSTM和BiLSTM神经网络时间序列预测…

王老吉与加多宝共同的课题:受困于第二招牌

王老吉曾经凭借凉茶单品反超可口可乐&#xff0c;却在2015年后面临增速下滑、市场规模逐年缩小的增长困境。事实上&#xff0c;王老吉所在的凉茶市场现已成为存量市场&#xff0c;甚至在不断激化的竞争中逐年萎缩。为了打破原有业务的局限&#xff0c;王老吉曾推出过许多新品&a…

网站应用微信登录

准备工作 | 微信开放文档 <template><wxloginid"wxLoginForm"self_redirect"false":appid"appid":scope"scope":state"state":redirect_uri"redirect_uri"></wxlogin> </template><…

智慧实景无人直播带货系统搭建方案,一起来了解一下吧!

随着无人直播和带货的兴起&#xff0c;智慧实景无人直播带货系统成为了电商行业的新宠。本文将提出一种专业的搭建方案&#xff0c;通过技术驱动和商业机遇&#xff0c;实现智慧实景无人直播带货系统的成功落地。我们将深入探讨系统架构、技术支持和商业模式等关键要素&#xf…

安卓学习笔记

文章目录 1. Android系统架构2. Activity2.1 生命周期2.2 生命状态2.3 启动模式 3. Service3.1 定义3.2 两种启动方式3.3 生命周期3.4 跨进程service3.5 IntentService 4. BroadCastReceiver4.1 概念4.2 组成4.3 广播接收器的分类4.4 生命周期4.5 静态注册和动态注册 5. Conten…

C语言初阶学习笔记

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.复杂概念 1.1大小端 1.2 整形提升 1.2.1整形提升的意义…

达梦数据库物化视图介绍

概述 本文将介绍达梦数据库物化视图&#xff0c;给出其概念及相关创建、使用示例。 1.物化视图概念 物化视图 (MATERIALIZED VIEW) 是目标表在特定时间点上的一个副本&#xff0c;占用存储空间&#xff0c;即将查询出来的数据存储在数据库中。当所依赖的一个或多个基表的数据…

Vue 项目性能优化 — 实践指南

前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术&#xff0c;帮我们处理了前端开发中最脏最累的 DOM 操作部分&#xff0c; 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM&#xff1b;但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题&#xff0c;所…

vs2008下的mfc hello world实现

笔者不知道会写这种博文&#xff0c;好久没写mfc程序&#xff0c;hello world都不会创建了。起因是来了个mfc任务&#xff0c;那就得把mfc熟悉起来&#xff0c;先看下实现效果吧 因为是基于2008的&#xff0c;那就按照2008创建吧 文章目录 第一步&#xff1a;文件新建项目第二…

串口接收数据-控制LED灯

目标 通过串口接收数据&#xff0c;对数据分析&#xff0c;控制8个LED灯按照设定时间闪烁。 8个LED灯可以任意设计&#xff0c;是否闪烁。闪烁时间按ms计算&#xff0c;通过串口发送&#xff0c;可设置1~4,294,967,296ms&#xff0c;也就是4字节数据协议自拟&#xff0c;有数…

(AcWing)Dijkstra求最短路 I

给定一个 n 个点 m 条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;所有边权均为正值。 请你求出 1 号点到 n 号点的最短距离&#xff0c;如果无法从 1 号点走到 n 号点&#xff0c;则输出 −1。 输入格式 第一行包含整数 n 和 m。 接下来 m 行每行包含三个整…

06:流与并发

一般来说&#xff0c;在CUDA C编程中有两个级别的并发&#xff1a; &#xff08;1&#xff09;内核级并发 单一的内核被GPU的多个线程并行执行。 &#xff08;2&#xff09;网格级并发 多个内核在同一设备上同时执行。 一、流和事件概述 CUDA流是一系列异步的CUDA操作&am…