电商后台管理系统商品报表功能——通过nprogress添加进度条效果

矫情吗；* 2021-07-24 23:43 393阅读 0赞

# 一 优化策略 #

1 生成打包报告

2 第三方库启动CDN

3 Element UI组件按需加载

4 路由懒加载

5 首页内容定制

# 二 点睛 #

1 安装 nproress 依赖

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

2 官网

[https://github.com/rstacruz/nprogress\#readme][https_github.com_rstacruz_nprogress_readme]

# 三 代码 #

1 修改 main.js

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import './plugins/element.js'
    // 导入阿里的字体图标
    import './assets/fonts/iconfont.css'
    // 导入全局样式表,使得全局样式生效
    import './assets/css/global.css'
    // 全局导入axios
    import axios from 'axios'
    // 导入TreeTable 插件
    import TreeTable from 'vue-table-with-tree-grid'
    // 导入富文本编辑器组件
    import VueQuillEditor from 'vue-quill-editor'
    // 导入富文本编辑器对应的样式
    import 'quill/dist/quill.core.css' // import styles
    import 'quill/dist/quill.snow.css' // for snow theme
    import 'quill/dist/quill.bubble.css' // for bubble theme
    // 导入 NProgress 包对应的JS和CSS
    import NProgress from 'nprogress'
    import 'nprogress/nprogress.css'
    
    // 设置axios请求的根路径
    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    // 在 axios 的 request 拦截器中，展示进度条 NProgress.start()
    axios.interceptors.request.use(config => {
        NProgress.start()
        // 为请求头对象，添加 Token 验证的 Authorization 字段
        config.headers.Authorization = window.sessionStorage.getItem('token')
        return config
    })
    // 在 axios 的 response 拦截器中，隐藏进度条 NProgress.done()
    axios.interceptors.response.use(config => {
        NProgress.done()
        return config
    })
    
    Vue.prototype.$http = axios
    
    
    Vue.config.productionTip = false
    // 注册 TreeTable 组件
    Vue.component('tree-table', TreeTable)
    // 注册 富文本编辑器 组件为全局可用组件
    Vue.use(VueQuillEditor)
    // 添加时间过滤器
    Vue.filter('dateFormat', 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')
    
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    
    })
    
    new Vue({
        router,
        render: h => h(App)
    }).$mount('#app')

# 四 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/d9f9e5eea00d44e89a1fd5a98f353f2d.png
[https_github.com_rstacruz_nprogress_readme]: https://github.com/rstacruz/nprogress#readme
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/78d249aa8719467bb5bbfcae11068c71.png