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

实现 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

在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值