如何快速开发一个即插即用的Vue.js加载动画插件？

本文共计2492个文字，预计阅读时间需要10分钟。

设计一个网站，首先需要明确最终目标。加载状态是不可或缺的一环，它不仅给用户一个过渡体验，也给予服务器一个响应的时间。从使用方式来看，不论是从零开始编写还是直接下载现成的Loading插件，关键在于实现一个流畅且有效的加载过程。

无论最终要实现怎样的网站，Loading状态都是必不可少的一环，给用户一个过渡喘息的机会也给服务器一个递达响应的时间。

从使用方式说起

不管从0开始写起还是直接下载的Loading插件，都会抽象为一个组件，在用到的时候进行加载Loading，或者通过API手动进行show或者hide

<wait> </wait> ... this.$wait.show() await fetch('example.org') this.$wait.hide()

或者通过Loading状态进行组件间的切换

<loader v-if="isLoading"> </loader> <Main v-else> </Main>

。要想注册成全局状态，还需要给axios类的网络请求包添加拦截器，然后设置一个全局Loading状态，每次有网络请求或者根据已经设置好的URL将Loading状态设置为加载，请求完成后在设置为完成。