相关地址

官方示例网址

Github仓库地址（有文档）

安装

npm install nprogress

配置

如果在全局使用，直接在main.js中配置

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 加载条配置
NProgress.configure({
  // 默认出现进度，默认0.08
  minimum: 0.3,
  // 动画方式
  easing: 'ease',
  // 动画时间，默认200
  speed: 300,
  // 前进间隔时间
  trickleSpeed: 50,
  // 右上角是否显示加载圈
  showSpinner: false,
})
// 挂载到全局
app.config.globalProperties.nprogress = NProgress

使用

import { getCurrentInstance, reactive } from 'vue'
let { proxy } = getCurrentInstance()

function progressStart() {
  // 进度开始
  proxy.nprogress.start()
}

function progressDowm() {
  // 进度关闭
  proxy.nprogress.done()
}

颜色调整

在全局样式文件中加入

#nprogress .bar
  background: #18a058