NProgress的使用（一）vue项目中使用NProgress

NProgress介绍

平时我们在打开一个网页时，网页的顶部会有一个进度条，这个进度条不仅能够反映网页加载的速度，也能很好的增强用户体验。那么这个进度条是如何实现的呢？其实这是一个第三方开源的组件——NProgress。

官网： http://ricostacruz.com/nprogress/
github：https://github.com/rstacruz/nprogress

NProgress是一款前端轻量级的web进度条插件，一般配合全局的axios使用，达到实时反馈页面进度的效果。当然，也可以配合路由守卫使用。下面我们来看看如何在vue项目中使用NProgress。

vue项目中使用NProgress

使用node.js安装NProgress依赖

在vue项目中使用NProgress之前，我们要在电脑上安装node.js，使用npm进行NProgress的安装与引入。

使用npm安装的前提：安装node.js
安装链接：https://nodejs.org/en/
一、下载node.js最新版本

• 下载框内的node.js版本，完成安装。（如果中途有不会的，可以在网上查找具体的安装流程）
  

二、配置node.js

• 第一步 win+r 打开命