网站基本搭建得差不多了，这时产品说，要不给加个加载进度条把。

加载进度条

使用nprogress插件
npm i nprogress -S
一般是写在请求拦截和响应拦截里面。不过我用的是前端路由，页面都是静态的，没什么请求，所以就写在路由守卫里面。
router.js

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

router.beforeEach((to, from, next) => {
    NProgress.start()
    next()
})

router.afterEach((to, path) => {
    NProgress.done()
})

需求完成
这时又发现浏览器自带的滚动条太丑了，用el-scrollbar替换掉原生的把。

替换滚动条

虽然element plus官网上说不加height就默认自适应父级元素高度，但试了一下还是不行。于是加了一个初始高度，并在页面第一次加载的时候获取浏览器视口的高度赋值。
当视口的高度发生变化时，动态赋值给el-scrollbar

//App.vue
<template>
    <el-scrollbar>
        <router-view></router-view>
    </el-scrollbar>
</template>

<style>
html,
body,
#app{
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>

需求又完成
后续补充...