vue:安装使用nprogress(vue@3.3.4)-526互联

一，官方地址:

官方站:

https://rstacruz.github.io/nprogress/

代码站:

https://github.com/rstacruz/nprogress

二，安装/引入:

1,安装

root@lhdpc:/data/vue/responsive# npm install nprogress —save

2,main.js中引入:

import { createApp } from 'vue'
import App from './App.vue'
import router from './route/router'
 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//element-plus 的中文化
import locale from 'element-plus/lib/locale/lang/zh-cn'  //element-plus
//icon
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//引入nprogress和样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' // progress bar style
//配置NProgress
NProgress.configure({
    easing:'ease', // 动画方式
    speed: 600, // 递增进度条的速度
    showSpinner: false, // 是否显示加载ico
    trickleSpeed: 200, // 自动递增间隔
    minimum: 0.3 // 初始化时的最小百分比
})
 
//设置网页标题,启动nprogress
router.beforeEach((to, from, next) => {
    /* 路由发生变化修改页面title */
    if (to.meta.title) {
        document.title = to.meta.title+"--Admvuescaffold"
    }
    NProgress.start();
    next()
})
 
//nproress进度完成
router.afterEach(() => {
    NProgress.done();
});

说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/09/18/vue-an-zhuang-shi-yong-nprogress-vue-3-3-4/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔邮箱: 371125307@qq.com

三，查看vue框架的版本:

root@lhdpc:/data/vue/responsive# npm list vue
responsive@0.1.0 /data/vue/responsive
├─┬ @vue/cli-plugin-babel@5.0.8
│ └─┬ @vue/babel-preset-app@5.0.8
│   ├─┬ @vue/babel-preset-jsx@1.4.0
│   │ └── vue@3.3.4 deduped
│   └── vue@3.3.4 deduped
└─┬ vue@3.3.4
  └─┬ @vue/server-renderer@3.3.4
    └── vue@3.3.4 deduped