专栏首页前端vue3.使用sass、全局样式及进度条

3.使用sass、全局样式及进度条

项目地址

github地址、 码云地址

Sass 世界上最成熟、最稳定、最强大的专业级CSS扩展语言 NProgress 前端轻量级web进度条

使用sass
安装
npm install node-sass --save-dev
npm install sass-loader --save-dev
修改webpack配置

打开目录build/webpack.base.config.js 在module->rules最后添加项

{
    test: /\.scss$/,
    loaders:['style','css','sass']
}

位置

使用时记得加上 lang='scss'

测试sass

全局公共css
新建文件

文件目录 src/style/index.css

使用
// src/main.js
import '@/style/index.css'

这样就可以愉快的写一些公共样式了~

进度条

使用方法

安装NProgress
npm install nprogress --save

使用场景就是在每次切换路由跳转页面的时候都会通过滚动条来反映,那么就需要一个文件来控制路由及后期的限制页面访问权限 新建 src/permission.js文件

引入NProgress使用
import router from "./router";
import store from "./store";
//nprogress
import Progress from "nprogress";
import "nprogress/nprogress.css";
//message
import { Message } from "element-ui";
router.beforeEach((to, from, next) => {
  Porgress.start();
  next();
  Progress.done();
});
router.afterEach(() => {
  Progress.done();
});

4. 添加导航、分栏布局,配置路由及对应页面、登陆、404

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue+SessionStorage实现简单的登录

    我是基于vue脚手架cli做的,没用过cli的可以看下我之前写的cli脚手架搭建

    RtyXmd
  • 2.封装axios、本地存储,安装vuex、element

    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模...

    RtyXmd
  • 驳-Docker+Jenkins自动化部署

    系统管理--Global Tool Configuration--选择nodejs

    RtyXmd
  • 人工智能之机器学习CART算法解析

      人工智能之机器学习主要有三大类:1)分类;2)回归;3)聚类。今天我们重点探讨一下CART算法。

    数据星河
  • 手把手教你用Python库Keras做预测(附代码)

    当你在Keras中选择好最合适的深度学习模型,就可以用它在新的数据实例上做预测了。但是很多初学者不知道该怎样做好这一点,我经常能看到下面这样的问题:

    数据派THU
  • .Net6种成员的可访问性

    莫问今朝
  • 中国台湾资深老专家:你是不是又在假敏捷?

    敏捷开发的目的不是为了快速交付! 它是一种用来应付需求快速变化的软体开发方法。 – Wiki 许多IT主管或是工程师,都把敏捷开发误以为是一种快速交付的方法,...

    DevOps时代
  • 中国台湾资深老专家:你是不是又在假敏捷?

    许多IT主管或是工程师,都把敏捷开发误以为是一种快速交付的方法,就因为它比传统开发方法快一些,因此我们常常听到主管们在会议上抱怨:“不是已经在RUN敏捷开发了吗...

    DevOps时代
  • Java 8:不要再用循环了

    正如我之前所写的,Java 8中的新功能特性改变了游戏规则。对Java开发者来说这是一个全新的世界,并且是时候去适应它了。

    三哥
  • 机器学习(2)之过拟合与欠拟合

    关键字全网搜索最新排名 【机器学习算法】:排名第一 【机器学习】:排名第二 【Python】:排名第三 【算法】:排名第四 过拟合与欠拟合 上一篇(机器学习(1...

    昱良

扫码关注云+社区

领取腾讯云代金券