《Vue3笔记》第21节：Vue3项目引入NProgress加载进度条插件

一款基于 Vue 的建议进度条组件

主要为大家详细介绍了环形加载进度条封装，Vue插件版，原生js版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Vue 3 进度条 之前，我们首先要感谢一直愿意帮助全球开发者的开发者，尤其是那些为做出贡献的开发者。 这里我继续之前的开发，提供对vuejs版本3的支持。 目录 演示 演示或使用示例仓库 要求 Vue.js 3.x 安装 # npm $ npm install @aacassandra/vue3-progressbar 用法 主文件 import { createApp } from "vue" ; import App from "./App.vue" ; import router from "./router" ; import VueProgressBar from "@aacassandra/vue3-progressbar" ; const options = { color : "#bffaf3" , failedColor : "#874b4b" ,

效果图 首先我们看一下进度条组件运行出来的效果，如下图显示 进度条组件 实现过程 :black_medium-small_square: 项目搭建 progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具，生成的工作目录如下，其中各个文件夹的内容入之前的一篇文章一样 progressbar组件工作目录 :black_medium-small_square: progressbar源文件之template progressbar组件表现为.vue文件的形式，其中template部分内容如下 progressbar源文件template部分 我们可以分析一下，progressbar组件主要有这几项属性： 类型，利用type变量