2024年vue使用nprogress（进度条）_nprogress vue(2)，web开发软件

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

3.配置

NProgress.configure({
	easing: 'ease',  // 动画方式，和css动画属性一样（默认：ease）
	speed: 500,  // 递增进度条的速度，单位ms（默认： 200）
	showSpinner: false, // 是否显示加载ico
	trickle: true,//是否自动递增
	trickleSpeed: 200, // 自动递增间隔
	minimum: 0.3, // 初始化时的最小百分比，0-1（默认：0.08）
	parent: '#container'//指定此选项以更改父容器（默认：body）
})

4.使用

 NProgress.start()// 开始
 NProgress.set(0.4) // 设置进度，0-1
 NProgress.inc() // 增加一点点
 NProgress.done() // 完成

5.使用场景

• 路由中使用

  router.beforeEach((to, from , next) => {
  //每次切换页面时，调用进度条
  	NProgress.start();
  // 这个一定要加，没有next()页面不会跳转的。这部分还不清楚的去翻一下官网就明白了
  	next();
  });
  router.afterEach(() => {
  // 在即将进入新的页面组件前，关闭掉进度条
  	NProgress.done()
  })

• 封装axios中使用

  //在request拦截器中显示进度条Nprogress.start()
  axios.interceptors.request.use(config => {
  	  //请求开始时显示进度条
  	  Nprogress.start()
  	  return config
  })
  //response中完成进度条Nprogress.done()
  axios.interceptors.response.use(config => {
  	  //服务响应时完成进度条
  	  Nprogress.done()
  	  return config
  })

6.改变颜色

在App.vue中的style中增加：

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】