Vue項目開發，nprogress進度條加載之超詳細講解及實戰案例

Nprogress的默認進度條很細，它的設計靈感主要來源於 谷歌，YouTube

他的安裝方式也很簡單，你可以有兩種使用方式:

• 直接引入js和css文件
• 使用npm安裝的的方式

直接引入：

Npm安裝：

基本的使用方式

你可以調用 start() 和done()來進行進度條的控制

如果你準備在jQuery的Ajax調用接口的時候使用它的話可以考慮將其綁定到 到jQuery ajaxStart和ajaxStop事件。

下面是一個簡單的實例：

高級用法

百分比設置

你可以調用.set(n)設置進度百分比，，其中n是0..1之間的數字。你可以手動的設置進度條的位置（百分百0.0~1.0之間）

設置進度條的遞增

你可以使用.inc()來進行進度條的遞增設置，如果它的值為空則以一個隨機的量遞增。這將永遠不會達到100%。

當然你還可以給它設置一個特定的值，用來遞增進度條

你可以使用trickle來關閉遞增行為

通過將此設置為false來關閉自動遞增行為。(默認值是true)

更改啟動時使用的最小百分比。(默認值:0.08)

NProgress.configure({ minimum: 0.1 });

修改進度條的模板

你甚至可以修改進度條的模板，但要保證在頁面留有一個一個role='bar’元素。

NProgress.configure({
 template: "
...
"

});

easing 和 speed

可以使用easing (CSS easing字符串)和speed (ms)調整動畫的設置。(默認值:ease和200)

showSpinner

你可以通過parent來設置進度條的父容器，默認父容器是body

另外 本插件的css體積很小，你可以使用它或者選擇自己寫一個也沒問題。

nprogress在Vue中的使用

在router/index.js中創建如下代碼：

並在main.js中引入 ./router

總結：

nprogress 很優美、靈活，我們可以通過源碼看到他的所有可以設置的參數

那麼可以根據我們項目需求進行相應的設置。 歡迎關注交流批評指正。