项目地址
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']
}
复制
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsICMyYTMvw1dvwlMvwlM3VWaWV2Zh1Wa-cmbw5ydrh3ZhpWO1NjbvwFO1QDM2YTMtUGall3LcVmdhNXLwRHdo9CXt92YucWbpRWdvx2Yx5yazF2Lc9CX6MHc0RHaiojIsJye.png)
位置
使用时记得加上 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