重读vue电商网站45之项目优化上线

项目优化
添加进度条
打开 vue-ui 面板，选择依赖，输入 nprogress 进行安装相关依赖。
npm
Javascript
npm install --save nprogress
在 main.js 入口文件中，进行相关配置。首先先导入包对应的js 和 css：
Javascript
// 导入NProgress包对应的js和css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
配置 request 请求拦截器 和 response 响应拦截器，这样我们就能在每次网络请求时能够展示进度条了。
Javascript
// 在 request 拦截器中，显示进度条 NProgress.start()
// 设置axios请求拦截器
axios.interceptors.request.use(config => {
NProgress.start()
config.headers.Authorization = window.sessionStorage.getItem('token')
// console.log(config)
return config
})
// 在 response 拦截器中，隐藏进度条 NProgress.done()
axios.interceptors.response.use(config => {
NProgress.done()
return config
})
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。