Vue3从0到1组件开发

问题由来 这篇文章的主题并非是我在工作中遇到的，而是在学习群里一位群友提到的一个问题。 如图，在Bilibili的首页，有多个分类，默认渲

功能介绍 2021年的现在，5G网逐渐普及， 对我们普通人而言，5G以手机为突破口冲进了我们的生活，它给我们最直接的第一印象就是比4G更快

分析一下 如上图，在前端领域内，当某一项目可以上传多图时，都是默认展示预览图，当点击预览图之后，会展示如效果所示的预览效果。 这一效果对于

前解 在之前的文章中写过一篇关于steps步骤条组件，但是这个步骤条仅仅只是步骤的推进， 而今天这篇文章想写一些关于步骤条的动画的内容。

分析一下 这类组件的话常见于服务性质或者商业性质类的项目上，例如美团、饿了么、去哪儿等项目，这类项目为客户提供的服务需要直接用户当前的位置

loading动画的使用 loading动画已经在交互圈子里算是老常客了，老派的、时尚的、酷炫的也是各种各样，令人眼花缭乱。 尽管如此，这

吧唧吧唧一下 即时通信(Instant Messaging,简称 IM )，在当下应该是部分网站都会选择的在线客服联系方式，尤其是以售卖线

这个组件是公司项目中运用到的一个组件，我接受项目时仅完成了下拉即以及下拉刷新的动画，后来boss觉得滑到底部之后无交互不好看，于

业务组件的定义 在现有的组件库中其实也可以看到这一分类，不确定背后的原因，但盲猜有些是定制的组件、有些是构思(脑补)的业务组件。 不过别人

简单说说抽屉 在开篇写的组件中，专门写过一篇基础组件Mask遮罩，这个组件在Web端属于是用的比较少的，所以一般在组件库中不会单独去写。

缘何 前面的几篇关于系统组件的文章可以在专栏中看到，这几个组件在如今的前端开发中可以说是必不可少的常见组件。 而Steps步骤条这一组件相

唠叨唠叨 说起来，角标这个东西大家应该是随处可见了，像我这种有强迫症的甚至看不得角标的存在。 但凡在我的手机上，我的视线内出现这东西，不点

Tooltip是指什么呢？ 这里呢，Tooltip文字提示顾名思义，就是文字提示了... 废话吼。 说一千道一万，看个图片全明了。 先看一

基础三大件 前面已经写过了Modal弹框组件，Notice信息组件，加上这章的Message信息组件，基本就覆盖了信息反馈的几大主要方式了

在项目开发中，无论是移动端还是PC端，Modal对话框大概是绕不过去的一个功能性组件吧？ 常用于重要消息提示，例如网络请求失败等信息

前言 原定计划到这一部分应该是讲业务组件了。 但是想来，业务组件本身和组件库的关系不算特别大，更多的是一种工作中的经验积累；

这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战 搭建一个组件库 从零开始的新世界 前面的十几篇文章都是在写组件，但是这个系列的主旨是从0到1开发一个组件库，却从没有写一些如何是把他们成库

如果说之前的轮播图还能因为其常见性，普遍性而跻身布局组件的话， 那么滚动这个也能算布局组件？来看看吧

不整那些有的没的了， 回到面包屑，想必做web开发的小伙伴对这个不会陌生。 而其他的小伙伴可能不知道是啥

轮啊轮播图 为什么放在布局组件？ 我的天啊，这个作者肯定脑子抽了， 轮播图一看就是业务组件啊，他居然当成布局组件，肯定是瞎写，关了关了。且看我慢慢说来。