【vue2类型助手】vue2-cli 实现为 vue2 项目中的组件添加全局类型提示

news2024/11/26 2:27:19

实现 vue2 全局组件提示

vue2 项目全局注册组件直接使用没有提示

由于vue2中使用volar存在很大的性能问题,所以只能继续使用vetur,但是这样全局组件会没有提示,这对于开发来说,体验十分不友好,所以开发此cli并借助vetur帮助解决这个问题。

实现效果

hover 提示

在这里插入图片描述

属性和事件提示

在这里插入图片描述

在这里插入图片描述

使用

全局安装了@winches/vue2-cli

npm i -g @winches/vue2-cli

进入到项目使用的组件库导出入口文件,比如element-uiindex.js
在这里插入图片描述

复制该入口的相对路径和导出组件数组变量components

将其作为参数,随后在该组件库的根目录运行指令

vue2-cli vetur -p <导出组件文件相对路径> -n [components]

随后开始运行

在这里插入图片描述

运行成功后,会在本地生成一个vetur目录,将该目录移动到项目中

在这里插入图片描述

随后在package.json里添加上下面一段,然后重启vscode就可以看到效果了

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

额外功能 inject-hooks

项目多人协作的困扰

相信大家多多少少都遇到过,当主线分支的代码,合入到自己的分支的时候,如果这时候,主线中有一些依赖的更新或者添加或者删除,如果合入之后,没有及时的install的话,项目启动的时候,可能就会报错!

⭐️ hooks 功能

当检测到 lock 文件变更时,重新安装依赖

在这里插入图片描述

使用

进入到项目的根目录,随后运行下面指令

npx @winches/vue2-cli inject-hooks

或者全局安装运行

npm i -g @winches/vue2-cli
# 运行
vue2-cli inject-hooks

开始自动安装 git hooks

在这里插入图片描述

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

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

相关文章

时序预测 | MATLAB实现基于LSTM长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)

时序预测 | MATLAB实现基于LSTM长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价) 目录 时序预测 | MATLAB实现基于LSTM长短期记忆神经网络的时间序列预测-递归预测未来(多指标评价)预测结果基本介绍程序设计参考资料 预测结果 基本介绍 Matlab实现LSTM长短期记忆神经…

OpenCV基本操作——算数操作

目录 图像的加法图像的混合 图像的加法 两个图像应该具有相同的大小和类型&#xff0c;或者第二个图像可以是标量值 注意&#xff1a;OpenCV加法和Numpy加法之间存在差异。OpenCV的加法是饱和操作&#xff0c;而Numpy添加的是模运算 import numpy as np import cv2 as cv imp…

k8s 自身原理 4

前面咱们分享了 mater 和 worker 节点里面都有哪些组件&#xff0c;他们又是各自主要负责的工作是什么&#xff0c;现在我们心里应该都有数了吧 master 节点&#xff1a; etcd 存储资源配置&#xff0c;ApiServer 提供 RESTful Api 用于交互&#xff0c;scheduler 用于调度 p…

通过将信号频谱与噪声频谱进行比较,自动检测适当的带通滤波器转折频率研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

低代码已经发展到什么水平了

陈老老老板&#x1f9b8; &#x1f468;‍&#x1f4bb;本文专栏&#xff1a;生活&#xff08;主要讲一下自己生活相关的内容&#xff09; &#x1f468;‍&#x1f4bb;本文简述&#xff1a;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f468;‍&#x1f4bb;上一篇…

simulink学习笔记:基于模型的控制和pid整定

在学习的时候发现了一个很好的学习simulink的网站&#xff0c;打算来练练手&#xff1a;Introduction: Simulink Control&#xff0c;过程中会涉及到搭建动力学模型和设计pid控制器&#xff08;整定pid参数&#xff09;。该模型描述的是火车的两节车厢&#xff0c;对前一节车厢…

迪瑞克斯拉算法 — 优化

在上一篇迪瑞克斯拉算法中将功能实现了出来&#xff0c;完成了图集中从源点出发获取所有可达的点的最短距离的收集。 但在代码中getMinDistanceAndUnSelectNode()方法的实现并不简洁&#xff0c;每次获取minNode时&#xff0c;都需要遍历整个Map&#xff0c;时间复杂度太高。这…

《Zookeeper》源码分析(九)之选举通信网络

在上一篇文章中讲到QuorumCnxManager&#xff0c;它负责zookeeper服务器在选举期间最底层的网络通信&#xff0c;整个网络涉及到的类如下&#xff1a; 整个网络建立的过程如下&#xff1a; 选举前创建好QuorumCnxManager实例&#xff0c;并在QuorumCnxManager构造函数中创建好…

scope组件穿透

今天我们以单选框为例来探究一下样式的穿透问题 1.代码 <template><div class""><el-radio v-model"radio" label"1">备选项</el-radio><el-radio v-model"radio" label"2">备选项</el-r…

glOrtho与gluOrtho2D 的作用

gluOrtho2D 函数设置二维正交裁剪区域。 相当于调用 zNear -1 且 zFar 1 的 glOrtho 。 glOrtho定义二维正交投影矩阵&#xff0c;这个矩阵会把视图&#xff08;摄像机&#xff09;空间的坐标转换到一个裁剪空间&#xff0c;一言以蔽之&#xff1a;glOrtho定义了裁剪空间&…

Netty:DelimiterBasedFrameDecoder分析

说明 io.netty.handler.codec.DelimiterBasedFrameDecoder是ByteToMessageDecoder的一个实现类&#xff0c;用一个或多个分割符拆分接收到的 ByteBuf。这个主要用于解析分隔符在帧的末尾的情况。注意&#xff0c;如果分割符在帧的开头&#xff0c;那么解析出来的帧的长度是0&a…

从一到无穷大 #10 讨论 Apache IoTDB 大综述中看到的优劣势

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言问题定义新技术数据模型schemalessTsfile设计双MemTable高级可扩展查询其他 IotD…

如何实现浅拷贝和深拷贝

一、浅拷贝的实现方法 1.Object.assign方法 let obj1{name:"aaa",}let obj2{age:20}let obj3Object.assign(obj1,obj2)// obj3.age30console.log(obj1);console.log(obj3);console.log(obj1obj3);console.log(obj1obj3); 结果为&#xff1a; 2.直接赋值 let obj1{n…

sql中union all、union、intersect、minus的区别图解,测试

相关文章 sql 的 join、left join、full join的区别图解总结&#xff0c;测试&#xff0c;注意事项 1. 结论示意图 对于intersect、minus&#xff0c;oracle支持&#xff0c;mysql不支持&#xff0c;可以变通&#xff08;in或exists&#xff09;实现 2.测试 2.1.创建表和数…

将Map存到数据库中,并且支持数据类型原样取回

1.数据库设计 1.1 表设计 create table variables (id bigint not null comment 主键,business_key varchar(128) null comment 业务key,data_key varchar(128) null comment Map中的key,data_value varchar(…

35岁职业危机?不存在!体能断崖?不担心

概述 90年&#xff0c;硕士毕业&#xff0c;干了快8年的Java开发工作。现年33岁&#xff0c;再过2年就要35岁。 工作这些年&#xff0c;断断续续也看过不少35岁找不到工作&#xff0c;转行&#xff0c;降薪入职的传闻、案例。 35岁&#xff0c;甚至30岁之后&#xff0c;体能…

【Linux操作系统】文件描述符fd

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ Linux之路       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1…

easyx图形库基础:1.基本概念的介绍+图形的绘制。

基本概念的介绍图形的绘制 一.基本概念的介绍。1.为什么要使用easyx图形库2.安装easyx图形库。3.语法相关 二.图形绘制1.窗体创建和坐标的概念。1.基本窗体的创建。2.坐标概念3.改变逻辑坐标。 2.设置图形颜色1.设置描边颜色和描边样式。2.设置图形填充颜色和填充样式3.绘制图形…

【第二阶段】kotlin的函数类型作为返回类型

fun main() {//调用,返回的是一个匿名类型&#xff0c;所以info就是一个匿名函数val infoshow("",0)//info接受的返回值为匿名类型&#xff0c;此时info就是一个匿名函数println(info("kotlin",20)) }//返回类型为一个匿名函数的返回类型fun show(name:Str…

编程工具合集

须知&#xff1a; 本博文只是为了记录程序员在编程中所用到的编程工具以及效率软件&#xff0c;如有侵权&#xff0c;请告知&#xff01; VSCode 英文官网&#xff1a;https://code.visualstudio.com/ 中文官网&#xff1a;http://vscode.p2hp.com/ win下载链接&#xff1a;VS…