vue样式的全局引入、vue页面跳转进度条、css3滚动条美化

最新推荐文章于 2026-04-22 19:51:28 发布

原创最新推荐文章于 2026-04-22 19:51:28 发布 · 288 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #html #javascript

vue总结专栏收录该内容

2 篇文章

订阅专栏

文章介绍了如何在Vue.js项目中进行样式管理，包括使用SCSS和全局引入变量及混合函数。此外，通过nprogress实现路由跳转时的伪进度条，改善网络延迟的用户体验。同时，还展示了如何美化浏览器滚动条以及在页面加载时添加loading效果，以减少白屏时间并提供更友好的交互体验。

样式

<style lang="scss" scoped>
  ...
</style>

全局样式引入

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
        @import '@/styles/variable.scss';
        @import '@/styles/mixins.scss';
        `,
      },
    },
  },
}

使用 nprogress 对路由跳转时做一个伪进度条，这样做在网络不好的情况下可以让用户知道页面已经在加载了：

import NProgress from 'nprogress';

router.beforeEach(() => {
  NProgress.start();
});

router.afterEach(() => {
  NProgress.done();
});

美化滚动条

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  width: 6px;
  background: rgba(#101F1C, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(#101F1C, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(#101F1C, 1);
}

首次加载页面时，会产生大量的白屏时间，这时做一个 loading 效果看起来会很友好，其实很简单，直接在 public/index.html 里写一些静态的样式即可。