手摸手带你用实现vue全屏loading插件

手摸手带你用实现vue全屏loading插件

前言：

由于我们打开网页时，浏览器与服务器交互需要时间，受限于宽带以及服务器性能，导致用户在访问一个网页时，往往需要一个等待期，才能在浏览器中真正完全展示出网页内容。在网页加载过程中网页就是一片空白，对于我们用户而言，我们看到一片空白，还以为网站 “挂掉了”，就很忧伤！！

当然了，我们针对这个问题，各大网站都有自己的解决方案。

有的网站会用骨架屏。

比如掘金:利用骨架屏，给用户提醒，网站内容马上呈现给您，不要着急!

有的网站会选择在数据出来之前 定义一个全屏的loading，提供用于网站正在加载

比如：网站在加载时以及网站刷新时，会弹出全屏loading。

文章目的：

今天我们就要带大家实现，在vue开发的前后端分离应用中，实现在网页加载以及刷新时，实现如上图全屏loading的效果!

功能分析

vue项目中所有的请求一般都是通过axios，所以我们需要给axios新增请求和响应拦截，在请求拦截中显示loading,和响应拦截中关闭loading。

所以我们需要定义两个全局方法，一个是显示loading，叫$showLoading(),另一个叫$hideLoading()关闭全屏loading。

代码实现

上面的梳理，我们明确了，需要定义两个全局方法，一个显示loading一个关闭loading，这里我们定义一个Vue的插件通过插件动态给实例安装 显示和关闭Loading方法。

• 定义$loading插件，在Vue构造函数原型上添加两个方法

以下loading.js代码

const $loading = {
    install: (Vue)