直播平臺製作，使用 NProgress 進度條

直播平臺製作，使用 NProgress 進度條

第一步：安裝 NProgress

$ npm install --save nprogress

第二步：在main.js檔案中匯入 NProgress 包對應的JS和CSS

// 匯入 NProgress 包對應的JS和CSS
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

第三步：在攔截器中使用 NProgress.start()和NProgress.done()

// axios請求攔截
// 在 request 攔截器中，展示進度條 NProgress.start()
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最後必須 return config
  return config
})
// 在 response 攔截器中，隱藏進度條 NProgress.done()
axios.interceptors.response.use(config => {
  // console.log(config)
  NProgress.done()
  // 在最後必須 return config
  return config
})

 以上就是直播平臺製作，使用 NProgress 進度條， 更多內容歡迎關注之後的文章