前端学习(2038)vue之电商管理系统电商系统之优化nprogress加载进度条
生活随笔
收集整理的這篇文章主要介紹了
前端学习(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}-$ozvdkddzhkzd ${hh}:${mm}:${ss}` }) new Vue({router,render: h => h(App) }).$mount('#app')總結
以上是生活随笔為你收集整理的前端学习(2038)vue之电商管理系统电商系统之优化nprogress加载进度条的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 邮箱服务申请数字证书
- 下一篇: 工作23:vue---封装request