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