【Vue】【TS】如何在 Vue + TS 的项目中引入 nprogress 并挂载为 Vue 的全局变量

【Vue】【TS】如何在 Vue + TS 的项目中引入 nprogress 并挂载为 Vue 的全局变量

问题描述

现在,我们想把 nprogress 引入一个 Vue + TS + ESlint 的项目中

按照 nprogress 的文档说明,我们只需要引入 nprogress.js 和 nprogress.css,即可直接全局使用 NProgress

按照 Vue 项目的习惯,我们希望通过 Vue.prototype.$np = NProgress 将其挂载为全局变量以方便使用

但是,因为我们的项目使用 TS 构建,NProgress 实际上是没有显式声明的,所以这里 ESlint 会报 no-undef 的错

这时,当然可以直接关闭 no-undef 的 lint 规则;但接下来,我们在组件中使用 this.$np 的时候,又出现了讨厌的标红报错

 关闭规则非长久之计,我们希望 this.$np 能完美融入我们的类型系统,最好还能有代码联想的提示,这样一来,我们就能像使用 this.$router 一样舒服地使用它

(只成功试验了 VSCode,Webstorm 不清楚)

解决方案

1. 创建 src/plugins/nprogress 目录,将 nprogress 提供的 JS 和 CSS 文件下载到其中

2. 创建 src/plug

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值