vscode
cmd
vuejs
首先，找到一张loading的gif图，存放在静态资源目录下。
r然后写一个展示该loading图的组件，在gif图外面包一层div，加上一个半透明的灰色背景，图片居中展示，到这一步为止有css基础的同学们应该都没问题。
接下来是重点的js部分，新建一个loading.js文件，引入Vue和之前写好的index.vue文件，并使用Vue.extend() 创建一个index.vue的子类Loading。需要注意的是，此时的Loading还只是一个Vue 构造器，并不是一个实例，因此并没有被挂载到Dom树上。
然后，我们需要导出2个方法，分别是打开loading组件的open()方法和关闭loading组件的close()方法。close()方法比较容易理解，当loading实例存在时，关闭即可。open()方法则需要注意几点，最开始instance实例是不存在的，因此需要判断一下，如果实例不存在则创建instance实例，如果实例已存在，则说明已经open了，所以直接return终止函数执行即可。然后将实例挂载到document上。这里很巧妙的利用了Vue.nextTick()方法，当dom视图更新后才设置instance.visible = true，这样就能确保dom视图已经更新完毕，instance实例挂载完成。当然，这里也可以使用$mount()来将组件挂载到 body 节点上，如后图所示。
最后，使用创建Vue插件plugins，将导出的loadingInstance实例挂载到Vue实例和原型链上，方便调用。插件的使用，直接在main.js中使用Vue.use（）即可，这里就不再贴图赘述。
我们使用loading的场景大多数是在发送请求到响应请求这段时间，这里以封装axios请求为例，在发送请求的拦截器中调用loading插件的open()方法，在响应请求的拦截器中调用loading的close()方法即可。
上述方法封装的loading，在发送一个请求时是没问题的，但是如果同时发送多个请求，而每个请求的响应时间不一样，就会出现这样的问题——只要其中1个请求结束了，那么所有的loading加载图都会消失。为了避免这种情况，针对上述方法做进一步的优化，增加一个count计数器，当调用open的时候count++，调用close的时候count--，而只有当count为0时，才能真正关闭loading，这样就能确保所有请求全部完成才关闭loading！
是否需要让所有请求全部完成，才取消loading，要根据项目实际情况来确定，以需求方准绳。
图片最好使用相对路径，这样可以封装成独立的第三方插件，供其他项目使用。