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

RtyXmd

发布于 2018-08-30 14:51:49

7150

发布于 2018-08-30 14:51:49

文章被收录于专栏：前端vue

项目地址

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'

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

进度条

使用方法(http://yehe.isd.com/column/support-plan/article-edit/%5Bhttps://blog.csdn.net/qq_35844177/article/details/70171054%5D(https://blog.csdn.net/qq_35844177/article/details/70171054%29)

安装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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.08.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

sass