vue3使用nprogress实现全局loading进度条

1、npm安装nprogress
在npm首页搜索nprogress并进行安装

npm i nprogress

2、main.js引入css样式
安装后，在node_modules中可以找到nprogress，在main.js中引入对应的css文件

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import 'nprogress/nprogress.css'

app.mount('#app')

3、封装显示和隐藏loading方法
由于是全局loading，每个页面在加载中和加载完成时都得使用nprogress，因此可以封装一个js

import nprogress from "nprogress";

//显示全屏loading
export function showFullLoading(){
  nprogress.start()
}
//隐藏全屏loading
export function hideFullLoading(){
  nprogress.done()
}

4、全局前置守卫和全局后置守卫调用loading方法
由于每个页面在加载中时都得显示loading，因此可以在全局前置守卫中调用显示loading方法
由于每个页面在加载完毕后都得隐藏loading，因此可以在全局后置守卫中调用隐藏loading方法

import {router} from '~/router'
import { showFullLoading, hideFullLoading } from "~/composables/util";

router.beforeEach((to, from, next) => {
  showFullLoading()
})

router.afterEach((to, from) => {
  hideFullLoading()
})

5、自定义全局loading进度条样式
在完成上述步骤以后，可以运行项目，F12来查看进度条的样式是哪一个，然后在app.vue中自己修改想要的样式，例如#nprogress .bar就是对应的进度条样式，可以修改颜色、高度等，注意修改的时候后面得要加!important

<style>
#nprogress .bar{
  background-color: #f4f4f4!important;
  height: 3px!important;
}
</style>

6、最终实现效果
该效果是截取vueuse中的nprogress ，具体的可以自己动手试一试