【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