Vue3.2+Vite2.x+Typescript项目进阶搭建-

安装依赖

npm i nprogress --save -dev

npm i --save -dev @types/nprogress 

src目录下创建目录plugins（该目录存放插件相关配置），plugins目录下创建nprogress目录，nprogress目录下创建index.ts文件，内容如下

// 文件位置：  src/utils/nprogress.ts
// 引入进度条
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

//全局进度条的配置
NProgress.configure({
    easing: 'ease',  // 动画方式    
    speed: 1000,  // 递增进度条的速度    
    showSpinner: false, // 是否显示加载ico    
    trickleSpeed: 200, // 自动递增间隔    
    minimum: 0.3 // 初始化时的最小百分比
});

// 打开进度条
export const start = ()=>{
    NProgress.start()
};

// 关闭进度条
export const close = ()=>{
    NProgress.done()
};

API 说明

NProgress.start()
作用：开启进度条
NProgress.done()
作用：关闭进度条
NProgress.set(n)
作用：设置进度条的百分比，其中 n 是 0 ~ 1 之间的数字。
NProgress.inc()
作用：以随机量递增进度条，但永远不会达到 100%。
常见配置
minimum
作用：进度条开始时的百分比（默认0.08）
showSpinner
作用：是否显示右上角螺旋加载提示
parent
作用：设置父容器（默认body）

NProgress.configure({
    minimum: 0.08,
    showSpinner: true,
    parent: '#box1'
})

基础用法

一般搭配路由使用，页面跳转前开启进度条加载动画，跳转完成后关闭加载动画

import { createRouter, createWebHistory } from "vue-router";
import { start, close } from "/@plugins/nprogress";

//配置路由和组件之间的映射
const routes = [
  {
    path: "/",
    //Login.vue 不可以省略.vue后缀
    component: () => import("/@views/user/Login.vue"),
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach((to: any, from: any, next: () => void) => {
  start();
  next();
});

router.afterEach(() => {
  close();
});
export default router;