vue安装nprogress(进度条动画)

# npm

npm install --save nprogress

# 引入

index.js

src/router/index.js

import Vue from "vue";
import VueRouter from "vue-router";
import NProgress from "nprogress"; // 引入进度条动画
import 'nprogress/nprogress.css';  // 引入进度条样式
// 进度条动画配置
NProgress.configure({
  showSpinner: false // 是否显示加载ico
});

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "登录",
    component: () => import("@/views/login/index.vue")
  }
];

const router = new VueRouter({
  routes
});

/**
 * @description: 路由进入
 * @author: chenbz
 * @date: 2021/4/12
 */
router.beforeEach((to, from, next) => {
  // 加载进度条动画
  NProgress.start();
  next();
});

//路由进入完毕：关闭进度条
router.afterEach(() => {
  // 关闭进度条动画
  NProgress.done();
});

export default router;

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

# CDN

vue.config.js

module.exports = {
  // 配置使用CDN
  configureWebpack: {
    externals: {
      nprogress: "NProgress"
    }
  },
};

index.html

<!--  进度条动画  -->
<link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js">

# 参考博客

1. 官方文档
2. Vue项目页面跳转时候的，浏览器窗口上方的进度条显示