动手造一个vue的loading插件

        在一般的vue项目中，都会用到Loading或者Alert之类的弹窗浮层，而他们是一种比较高频率出现的组件。

        一般情况下，我们都会去直接import该组件，然后直接以标签的形式引用进去当前页面组件中，如下图：

        这种是我们比较常用的一种方法，它的好处就是让我们比较直观地对组件进行调用， 方便地通过标签上的属性动态地传给该组件，或者去获取子组件emit出来的事件。而我们也比较容易理解该组件在当前父组件中的运作情况。

        如果该组件只是属于某个组件页面中的而已，这种方法确实可以省去编程中的一些不必要的耦合，提升代码质量以及可读性。但是，如果像我一开头说的Loading或者Alert这种可能到处都会出现的组件来说，这种引用（import）方法就会造成不必要的重复代码出现，所以对于这种组件，我们要将其改造，使之引用一次，到处就都可以随意使用的插件！

 

       首先，我们需要有一个拿来改造的vue组件，这里我只显示部分我要改造的vue组件的代码：

export default {
  name: 'Loading',
  data () {
    return {
      isShow: false     // 控制是否显示
    }
  }
}

我这个loading组件中除了html结构和css样式，js的代码就是这一个参数，到时候我们将操作这个参数，来达到控制显示隐藏的功能。

然后，我们为该组件单独创建一个目录：

目录里面有两个文件，一个是组件模板文件(Loading.vue)和index.js，index.js的作用，我自己的理解就是，把该组件内部的方法链接到我当前js里面，然后进行调用。index.js这个文件算是一个组件的配置文件吧。

         在对index.js文件进行代码编写前，我们需要去了解一下vue官方文档里面，是如何开发vue插件的。传送门：https://cn.vuejs.org/v2/guide/plugins.html#开发插件

 好吧，官方文档说得这么简单，连个简单的例子都不给！但是这里面说到了一些重点，首先我们在这个插件里面，要有一个公开的方法install，它接受两个参数，一个是Vue构造器，第二个是可选的参数对象（也就是我们自定义的一些参数,比如主题啊什么的）。然后编写插件有四种方法将其“绑定”到Vue上面，这里我只用到了上图中第3点和第4点。

        接下来我们来封装一下该组件，我的代码如下：

在这里要说的一点及时，当挂载到Vue上面时，有两种方法，一种是Vue.mixin()，也就是全局混入，另一种是添加到实例方法。一般我觉得使用添加到实例方法比较好，具体可看下图官网的说法：

我的理解就是大概说可能你的组件中的参数或者方法可能会跟其他组件的一样，可能会带来不必要的麻烦。 

         至此，我们便完成了loading组件的封装。接下来我们在main.js里面注册引用

         接下来我们要使用这个插件，现在就非常简单了，我们直接在某个需要用到的组件中，直接调用Vue实例上面的方法即可，

 这样我们就将loading浮层打开了。一个简单的loading插件就这样子完成了。接下来就可以自己动手再搞一个Alert啦~

最后要感谢一下这个博主的这篇文章给了我一些思路：https://www.jianshu.com/p/180bf559339d