vue3 安装 nprogress
时间: 2023-11-23 19:55:29 浏览: 109
vue使用nprogress实现进度条
安装nprogress的步骤如下:
1. 在终端中使用npm安装nprogress:`npm install nprogress`
2. 在Vue项目中引入nprogress:在main.js中添加以下代码:`import NProgress from 'nprogress'`,并在全局下面引入CSS样式:`import 'nprogress/nprogress.css'`
3. 在Vue项目中使用nprogress:在需要使用nprogress的组件中,可以使用`NProgress.start()`打开进度条,使用`NProgress.done()`关闭进度条。
以下是一个使用nprogress的Vue组件的例子:
```vue
<template>
<div>
<button @click="simulateLoading">模拟加载</button>
</div>
</template>
<script>
import { start, close } from '@/utils/nprogress'
export default {
methods: {
simulateLoading() {
start()
setTimeout(() => {
close()
}, 2000)
}
}
}
</script>
```
阅读全文