美文网首页
Vue项目引入NProgress插件

Vue项目引入NProgress插件

作者: 刘_小_二 | 来源:发表于2020-07-06 13:50 被阅读0次

1.NProgress安装

npm install --save nprogress
yarn add nprogress

2.NProgress使用

import App from './App'
import VueRouter from 'vue-router'
import router from './router' //你的路由文件
//引入nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css' //这个样式必须引入

Vue.use(VueRouter)

// 简单配置
NProgress.inc(0.2)
NProgress.configure({ easing: 'ease', speed: 500, showSpinner: false })


router.beforeEach((to,from,next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})


new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

相关文章

  • Vue项目引入NProgress插件

    1.NProgress安装 2.NProgress使用

  • vue项目中引入星空特效

    vue项目中引入星空特效 展示 安装插件 在main.js中引入插件 在项目中使用 参数意义 遇到的问题 引入之后...

  • vue文件内引入图片, vetur提示报错

    背景 使用vue-cli3+typescript+vscode+vetur插件来写vue项目时, 在vue组件引入...

  • Vue项目引入组件库

    目录 Vue 2.0的项目扩展1.如何舒服地使用Atom安装插件配置皮肤颜色2.Vue项目引入组件库引入方式支持E...

  • 如何舒服地使用Atom

    目录 Vue 2.0的项目扩展1.如何舒服地使用Atom安装插件配置皮肤颜色2.Vue项目引入组件库引入方式支持E...

  • Vue项目官方依赖库

    目录 Vue 2.0的项目扩展1.如何舒服地使用Atom安装插件配置皮肤颜色2.Vue项目引入组件库引入方式支持E...

  • Vue项目第三方依赖库

    目录 Vue 2.0的项目扩展1.如何舒服地使用Atom安装插件配置皮肤颜色2.Vue项目引入组件库引入方式支持E...

  • Vue插件开发

    项目里的iview是以插件的形式引入的,于是便了解了一下Vue的插件。插件通常会为Vue添加全局功能。 插件的使用...

  • Vue项目引入Scss插件

    1.Scss安装使用 1.0 首先安装依赖 1.1 找到build中webpack.base.conf.js,在r...

  • vue使用nprogress页面加载进度条

    下载 nprogress 入口文件,main.js引入 nprogress 1.引入依赖: 简单的调用 start...

网友评论

      本文标题:Vue项目引入NProgress插件

      本文链接:https://www.haomeiwen.com/subject/rfvwqktx.html