vue项目中引入进度条 nprogress

1、安装依赖

npm install --save nprogress

2、在src目录下新建 permission.js文件

import router from "@/router";

import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style

NProgress.configure({ showSpinner: false }); // NProgress Configuration

router.beforeEach(async (to, from, next) => {
  NProgress.start();
  next();
});
router.afterEach(() => {
  // finish progress bar
  NProgress.done();
});

3、在main.js文件中导入

import "./permission";

这时还有问题，会有红色标记

Vue: Could not find a declaration file for module  nprogress .
/Users/wang/Documents/docker/www/yunyou/website/web-pc/node_modules/nprogress/nprogress.js
implicitly has an  any  type.
Try  npm i --save-dev @types/nprogress  if it exists or add a new declaration (.d.ts) file containing  declare module 'nprogress';

1、使用 npm 安装 @types/nprogress 库

npm i --save-dev @types/nprogress

这个命令将安装 nprogress 的类型定义文件，--save-dev 参数表示将其安装为开发依赖项，这样在其他项目中也可以使用。

2、如果第一步没有解决问题，你可能需要手动添加一个新的声明文件（.d.ts）来定义 nprogress 模块。你可以在项目根目录下创建一个名为 declarations.d.ts 的文件，并在其中添加以下内容

declare module 'nprogress';

这将告诉 TypeScript 在当前项目中存在一个名为 nprogress 的模块，但不提供具体的类型定义。这样，TypeScript 会将 nprogress 模块视为任何类型，并允许你在代码中使用它。

3、如果你已经安装了 @types/nprogress 库，并且仍然遇到这个错误，可能是因为 TypeScript 无法找到这个库。你可以在 tsconfig.json 文件中添加以下内容：

"typeRoots": [
  "node_modules/@types"
]