一，官方地址:
官方站:
https://rstacruz.github.io/nprogress/代码站:
https://github.com/rstacruz/nprogress二，安装/引入:
1,安装
root@lhdpc:/data/vue/responsive# npm install nprogress —save2,main.js中引入:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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
说明：作者:刘宏缔 邮箱: [email protected]
三，查看vue框架的版本:
root@lhdpc:/data/vue/responsive# npm list vue
[email protected] /data/vue/responsive
├─┬ @vue/[email protected]
│ └─┬ @vue/[email protected]
│ ├─┬ @vue/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└─┬ [email protected]
└─┬ @vue/[email protected]
└── [email protected] deduped