【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