vue自定义响应式进度条组件，包含线形和圆形进度条

由于项目需要刚接触vue不久，发现vue是真的好用，性能又好，做了一个小的demo,详细记录一下：这是个进度条组件{线形进度条和圆形进度条，进度成功显示100%并且颜色会成为绿色，出错是进度条是红色，实时显示%比进度条数字。可直接在项目中使用，引入时在自定义标签上传入相应属性就能得到i想要的效果}

1.开发工具：我的环境是hbuilderX【windows环境】

建议初学者学完基础时不直接接触vue-cli脚手架，做demo时使用vue/cli-serverce-global做组件练习。

2.开始开发

第一步：随便在哪个位置新建一个文件夹（我这里为vueprogress），在里面新建一个App.vue文件作为入口文件，在新建一个progress.vue文件用来编写我们的组件

第二步：wi+r 输入cmd 在命令行里输入npm install -g @vue/cli-serverce-global安装vue-cli的原型编译工具（前提是在你已经安装好了node.js 和 vue环境并且正确配置好了环境变量）提一下vue/cli-serverce-global 他能直接编译 .vue文件 能单独在浏览器中运行

第三步：等待安装完后 在vueprogress文件里面打开cmd窗口输入vue查看vue是否安装正确，报错请自行百度，若正确 输入vue serve xxx.vue(若文件里面有App.vue则xxx.vue可以省略vue serve 否则就是 vue serve 你定义的入口.vue)回车执行

这时会出现一个端口： 第四部：接下来就是编写我们的组件了 在编辑器中打开progress.vue文件，添加如下代码