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

加载进度条

使用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

<el-scrollbar height="937px">
    <router-view></router-view>
</el-scrollbar>

<script setup>
import { onMounted } from 'vue'

window.onresize = () => {
    document.querySelector('.el-scrollbar__wrap').style.height = window.innerHeight + 'px'
}
onMounted(() => {
    document.querySelector('.el-scrollbar__wrap').style.height = window.innerHeight + 'px'
})
</script>

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