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"
]
 
这将告诉 TypeScript 在 node_modules/@types 目录下查找类型定义文件。
完成上述步骤后,重启 TypeScript 编译器或重新加载项目,问题应该得到解决。如果问题仍然存在,请确保你的 TypeScript 版本与 @types/nprogress 库的版本兼容,并检查是否有其他错误或冲突。

 

 

发布时间 : 2024-01-25,阅读量:774
本文链接:https://upwqy.com/details/940.html
云存储图片微信小程序中防盗链设置 vue项目中引入sass支持