前端学习（2038）vue之电商管理系统电商系统之优化nprogress加载进度条

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
//导入字体图标
import './assets/fonts/iconfont.css'
Vue.config.productionTip = false
//导入全局样式
import './assets/css/global.css'
import TreeTable from "vue-table-with-tree-grid"
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import axios from 'axios'// 导入NProgress, 包对应的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'Vue.prototype.$http=axios
axios.defaults.baseURL="http://127.0.0.1:8888/api/private/v1/"
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {NProgress.start()// console.log(config)// 为请求头对象，添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem('token')// 在最后必须 return configreturn config
})
// response 拦截器中,  隐藏进度条NProgress.done()
axios.interceptors.response.use(config => {NProgress.done()return config
})
Vue.config.productionTip=false;
Vue.component('tree-table',TreeTable)
Vue.use(VueQuillEditor)
Vue.filter('dataFormat', function (originVal) {const dt = new Date(originVal)const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0')const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')// yyyy-mm-dd hh:mm:ssreturn `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
new Vue({router,render: h => h(App)
}).$mount('#app')

前端学习（2038）vue之电商管理系统电商系统之优化nprogress加载进度条相关推荐

浅谈前端实现页面加载进度条以及 nprogress.js 的实现
以前在 Vue 的项目用了 nprogress 这个插件,一直对于其如何得知加载进度充满好奇,最近又看到了「前端如何实现页面加载进度条」这个问题,今天周六恰好一探究竟.以下仅为一家之言,如有异议,欢迎 ...
Vue项目实战06：nprogress页面加载进度条
博客: https://lvsige.top/ nprogress页面加载进度条前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们 ...
Vue：页面加载进度条
这段时间在踩Ant design pro Vue的坑,发现了个在手机端页面上经常出现的,加载进度条,效果蛮不错的!记录下来. cnpm install --save nprogress import ...
Android学习笔记（Android Studio）3-3（ProgressBar ProgressDialog）（加载进度条、转圈圈）UI组件之弹出组件
Android学习笔记3-3 推荐新手向学习视频:B站https://www.bilibili.com/video/av38409964点我传送 3-3 ProgressBar & Progr ...
NProgress.js - 前端全站进度条插件 - 给你的网站添加一个加载进度条
0x00 前言前几天给博客换了@Veen Zhao大佬的Cuteen主题,非常好看,但是因为不想让自己的博客和其他人的千篇一律,于是决定在Cuteen主题的前提下逐渐设计一些自己需要的东西.正巧前几 ...
vue 判断页面加载完成_Vue实战040：nprogress页面加载进度条
前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我 ...
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板
Vue学习笔记: Vue + Element-ui搭建后台管理系统模板技术:Vue + Element-ui 功能:后台管理系统基础模板,路由配置,加载页面进度条,请求响应拦截器的封装等页面预览: ...
计算机毕业设计基于springboot+vue+elementUI的网吧管理系统(源码+系统+mysql数据库+Lw文档）
项目介绍随着我国的经济发展,人们的生活水平也有了一定程度的提高,对网络的要求也越来越高,很多家庭都有了自己的电脑,但是很多时候大家在家里玩电脑的时候找不到那种玩耍的气氛和氛围,这个时候大家就都选择了 ...
vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...

前端学习（2038）vue之电商管理系统电商系统之优化nprogress加载进度条

前端学习（2038）vue之电商管理系统电商系统之优化nprogress加载进度条相关推荐

最新文章

热门文章