### **安裝+基本用法**
~~~text
// 下載安裝
npm i nprogress -S
?
// 基本用法
NProgress.start(); // 開啟進度條
NProgress.done(); // 關閉進度條
~~~
### **常用配置**
**遞增：**要遞增進度條，只需使用`.inc()`。這使它以隨機量遞增。這將永遠不會達到100％：將其用于每次圖像加載（或類似加載）。
~~~text
NProgress.inc();
~~~
如果要增加特定值，可以將其作為參數傳遞：
~~~text
NProgress.inc(0.2); //這將獲取當前狀態值并添加0.2直到狀態為0.994
~~~
> PS: 我的理解：即每次增加一點點，但永遠不會到百分之百
**配置項：**
### **`easing`和`speed`**
使用*緩動*（CSS緩動字符串）和*速度*（以毫秒為單位）調整動畫設置。（默認：`ease`和`200`）
~~~text
NProgress.configure({ easing: 'ease', speed: 500 });
~~~
### **`showSpinner`**
通過將加載微調器設置為false來關閉它。（默認值：`true`）
~~~text
NProgress.configure({ showSpinner: false });
~~~
### **在vue中的使用**
### **引入Nprogress默認樣式**
在~/main.js中引入Nprogress默認樣式
~~~text
// 引入進度條樣式
import 'nprogress/nprogress.css'
~~~
它默認顯示為藍色進度條，如果你想自定義進度條顏色，可在全局css中或在app.vue下寫入自己自定義的css樣式；
~~~text
<style>
// 自定義進度條顏色
#nprogress .bar {
background: #F811B2 !important; //自定義顏色
}
</style>
~~~
### **在頁面切換中使用**
在~/router/index.js 【路由配置】文件中:
~~~text
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入nprogress 進度條插件
import NProgress from 'nprogress'
?
Vue.use(VueRouter);
?
// 簡單配置 進度條,可以不配置：在axios中我們不再做配置，以用來區分。
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })
?
?
export const constRouter = [
{
path: '/login',
component: () => import('@/views/login/Login'),
},
...
]
?
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: constRouter
})
?
// 頁面路由剛開始切換的時候
router.beforeEach(async (to,from,next) => {
// 開啟進度條
NProgress.start();
})
?
// 頁面路由切換完畢的時候
router.afterEach(() => {
// 關閉進度條
NProgress.done()
})
?
?
export default router
~~~
### **在接口請求中使用**
在~/api/index.js 【axios請求配置】文件中:
~~~text
import axios from 'axios'
//引入nprogress 進度條插件
import NProgress from 'nprogress'
// 創建axios實例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, //URL地址 環境變量文件
timeout: 5000 ,//超時
})
// 請求攔截器
service.interceptors.request.use(
config => {
// 開啟進度條
NProgress.start();
return config
},
error => {
return Promise.reject(error)
}
)
// 響應攔截器
service.interceptors.response.use(
response =>{
// 關閉進度條
NProgress.done()
return Promise.reject(response)
},
error => {
// 關閉進度條
NProgress.done()
return Promise.reject(error)
}
)
export default service;
~~~
