第一步：vue环境的准备，此处不再累赘
第二步：进入vue项目目录，在vue项目终端(terminal)下载iview组件库
下载命令：npm install iview --save
第三步：在src/main.js文件中引入iview
import iView from 'iview';
import 'iview/dist/styles/iview.css'; // 使用 CSS
Vue.use(iView);
第四步：在数据加载时间较长的代码块中添加进度条
例如：ajax异步请求中
methods: {
getData () {
this.$Loading.start();//开始加载数据时进度条开始
$.ajax({
url: '/api/someurl',
type: 'get',
success: () => {
this.$Loading.finish(); //数据加载完成时进度条成功结束
}
error: () => {
this.$Loading.error();//异步请求失败时进度条异常结束
}
});
}
}
图例：进度条成功加载时

第五步：设置进度条样式
this.$Loading.config({
color: '#5cb85c', //color进度条颜色，默认为蓝色
failedColor: '#f0ad4e', //进度条加载失败时颜色，默认为红色
height: 5 //进度条高度，默认为2
});