Uso de NProgress (1) Usar NProgress en el proyecto vue
Introducción a NProgress
Por lo general, cuando abrimos una página web, habrá una barra de progreso en la parte superior de la página web. Esta barra de progreso no solo puede reflejar la velocidad de carga de la página web, sino también mejorar la experiencia del usuario. Entonces, ¿cómo se implementa esta barra de progreso? De hecho, este es un componente de código abierto de terceros: NProgress.
Sitio web oficial : http://ricostacruz.com/nprogress/
github : https://github.com/rstacruz/nprogress
NProgress es un complemento de barra de progreso web liviano de front-end, que generalmente se usa junto con los axios globales para obtener comentarios en tiempo real sobre el progreso de la página.. Por supuesto que puedeÚselo con protectores de enrutamiento. Echemos un vistazo a cómo usar NProgress en el proyecto vue.
Usar NProgress en el proyecto vue
Instale las dependencias de NProgress usando node.js
Antes de usar NProgress en el proyecto vue, necesitamos instalarlo en la computadora node.js,Use npm para instalar e introducir NProgress。
La premisa de usar la instalación de npm: instale
el enlace de instalación de node.js: https://nodejs.org/en/
1.Descarga la última versión de node.js
- Descargue la versión de node.js en el cuadro y complete la instalación. (Si no puede hacerlo a la mitad, puede encontrar el proceso de instalación específico en Internet)
dos,Configurar node.js
- El primer paso es win+r para abrir la ventana de comandos e ingresar cmd
- El segundo paso es ingresar el siguiente comando.
node -vDespués de la entrada, se mostrará el número de versión del nodo.
npm -vDespués de la entrada, se mostrará el número de versión del npm correspondiente.
Si se muestra la siguiente figura, significa que la configuración de node.js es correctamente y puede continuar con el siguiente paso.
Una vez completada la instalación, use el siguiente comando npm para instalar las dependencias de NProgress en la terminal de la consola
npm instalar nprogress --save
O use yarn para instalar, primero instale yarn y luego ingrese el siguiente comando en la terminal de la consola para instalar NProgress
añadir hilo nprogress
Presentamos NProgress
import NProgress from 'nprogress' // 导入 nprogress
import '@/components/NProgress/nprogress.less' // 导入样式，否则看不到效果
Uso de NProgress con guardias de enrutamiento
código fuente: (con notas detalladas)
import NProgress from 'nprogress' // 导入 nprogress
import '@/components/NProgress/nprogress.less' // 导入样式，否则看不到效果
NProgress.configure({
showSpinner: true }) // 显示右上角螺旋加载提示
router.beforeEach((to, from, next) => {
NProgress.start() // 开启进度条
// some code ...
NProgress.done() // 关闭进度条
})
lograr efecto：
NProgress generalmente se combina con axios, supervise el progreso de las solicitudes de axios en tiempo real, observe el efecto del progreso de los comentarios en tiempo real y mejore la experiencia del usuario.
API común de la documentación oficial de NProgress
| API | efecto |
|---|---|
NProgress.start() |
barra de progreso abierta |
NProgress.done() |
cerrar barra de progreso |
NProgress.set(n) |
Establecer el porcentaje de la barra de progreso, donde n es un número entre 0 y 1 |
NProgress.inc() |
Incremente la barra de progreso en una cantidad aleatoria, pero nunca llegue al 100% |
Configuración de uso común del documento oficial de NProgress
| API | efecto |
|---|---|
minimum |
El porcentaje en el que comienza la barra de progreso (predeterminado 0.08) |
showSpinner |
Función: Ya sea para mostrar el indicador de carga en espiral en la esquina superior derecha |
parent |
Establecer contenedor principal (cuerpo predeterminado) |
ejemplo de código：
NProgress.configure({
minimum: 0.08,
showSpinner: true,
parent: '#box1'
})
