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 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

控制台断点调试

HTML5学堂:在项目开发过程中,难免会需要调试一些数据,而大量的console.log()需要频繁切换JS和页面,同时最后有可能还忘记删除打印信息。使用断点调...

4184
来自专栏FreeBuf

EKFiddle:基于Fiddler研究恶意流量的框架

EKFiddle是一个基于Fiddler web debugger的,用于研究漏洞利用套件、恶意软件和恶意流量的框架。

1150
来自专栏电光石火

给树莓派安装中文字库

树莓派默认是采用英文字库的,而且系统里没有预装中文字库,所以即使你在locale中改成中文,也不会显示中文,只会显示一堆方块。因此需要我们手动来安装中文字体...

1965
来自专栏极客慕白的成长之路

Atom主题插件美化教程

对应的Themes就是可更换的主题。在这一共分为两块,UI Theme和Syntax Theme,一个是UI的,一个是文件语法的,这里可以选择相应的主题。

2232
来自专栏bboysoul

esxi6.5 安装omsa(OpenManage Server Administrator)

OMSA(OpenManage Server Administrator)是Dell主机的硬件检测和维护软件,可以安装在windows,linux还有esxi中...

2014
来自专栏小白课代表

PDF的最简单处理方案之一。

992
来自专栏黑泽君的专栏

ubuntu16.04安装谷歌拼音

  System Settings --> Language Support --> Install/Remove Languages   选中chinese,...

1962
来自专栏salesforce零基础学习

salesforce零基础学习(七十四)apex:actionRegion以及apex:actionSupport浅谈

我们在开发中,很难会遇见不提交表单的情况。常用的apex:commandButton,apex:commandLink,apex:actionFunction,...

2707
来自专栏破晓之歌

vscode-轻量级实用编辑器 原

注:安装好如果不生效的话,需要到“文件 -- 首选项 -- 文件图标主题 -- 选择vscode icons ”

1222
来自专栏美丽应用

ChromePie:单手搞定Chrome

1803

扫码关注云+社区

领取腾讯云代金券