前端开发：基于移动端的Vue项目的Loading使用

最新推荐文章于 2024-06-20 13:52:53 发布

三掌柜666

最新推荐文章于 2024-06-20 13:52:53 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：大前端开发常识文章标签：前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CC1991_/article/details/118866607

大前端开发常识专栏收录该内容

94 篇文章 ¥159.90 ¥299.90

订阅专栏

本文详细介绍了前端开发中，特别是在移动端Vue项目中使用Loading组件的实践。通过引入Vant的Loading组件，讨论了其在加载过程中的过渡状态作用，并提供了核心代码示例，展示如何实现Loading的加载和隐藏，适用于不同业务需求的加载场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在前端开发过程中，常用的组件有必要做一下使用的总结，尤其是对于刚入门的前端开发者来说既有利于知识点的掌握，又有利于总结归纳方便后期使用查看。不管是基于移动端还是PC端的前端Vue项目都是如此，那么本文就来分享一下在前端开发的时候经常使用的一个功能：Loading的使用，本文以基于移动端Vant的Loading使用为例来讲解，方便有需要的开发者学习使用。

Loading介绍

Loading加载：加载图标，用来表示加载过程中的过渡状态，或者说是在加载数据的时候显示动效，起到缓冲作用。

引入Loading

本示例以Vant下的Loading组件引入的方法为主，具体的引入步骤如下所示：

打开基于移动端的Vue项目，然后在项目的根目录里面找到main.js文件，然后直接引入Loading组件，其实项目里面如果引入了Vant组件，就不需要引入。这里直接在main.js文件中引入Loading组件即可。

import Vue from 'vue';  //框架如果已经引入过的话，这句就不用再加进去了


import { Loading } from 'vant';

Vue.use(Loading);

了解本专栏