手摸手带你封装Vue组件库以及组件开发

loading 我们一般用于页面等待，或者某个模块需要加载的时候，我们一般会使用 loading 组件。 loading 组件的展示一般分为两种，一种是全局 loading，一种是局部 loading

我们 Carousel 走马灯组件一般分为两部分，一个是走马灯的容器组件 carousel，一个是走马灯的每一项组件 carousel-item，所以我们需要创建两个组件。 然后我们思考一下大致思路，

Row & Col 布局组件开发 我们的布局一般分为行组件和列组件，所以我们需要创建两个组件，分别是 Row 行组件 和 Col 列组件，并且通过基础的 24 分栏，迅速简便地创建布局。 我们创建如图

本节我们开始实现我们的日历组件。 日历实现 跟之前一样我们先创建下面这样的文件结构，开始我们的布局和样式的开发。 我们先想一下日历组件的规则，首先默认显示当前月份的日历，然后通过点击上个月、下个月按钮

本节我们来做折叠面板组件的开发，通过折叠面板收纳内容区域，在一些需要展示大量内容，但又不希望用户一次性全部看到的情况下，使用折叠面板可以很好地解决这一问题。 我们先来分析一下，首先，需要标题和内容两个

由于 Table 组件实现代码以及问题比较多，我们接着上节继续。 固定列 指定列宽度和列左右滚动 在固定列之前我们先补充一个问题，那就是列的左右滚动，但是如果我们列特别多的时候我们上述写的默认是均分，

本节开始我们很常用的 Table 组件的开发，主要实现以下功能： 基础使用、自定义列、斑马线、固定表头、固定列、多选。 创建组件和样式文件 我们创建如图所示的组件目录结构。 这次有人会好奇为什么我没有

创建组件和样式文件 跟之前先创建如图所示的目录结构，然后我们在 packages/components/components.js 导出 pagination 需要你传入的总数 total，还有每一个

在开始之前我们需要考虑一下步骤条相关规则。 步骤不能少于两个 步骤有完成状态、准备状态、未开始状态 在这两个规则的前提下我们开始开发。 创建组件和样式文件 我们一般情况下使用步骤条都会在每个步骤条中放

创建组件和样式文件 跟之前先创建如图所示的目录结构，然后我们在 packages/components/components.js 导出 然后在 packages/theme-chalk/compon

最近有很多小伙伴让我赶紧出打包教程，那就我们先打包，久等了👋 Rollup 打包 Rollup 是一个 JavaScript 模块打包器，可以将多个模块打包成一个或多个文件。它支持多种模块化标准，如

好久不见，在开发之前依旧带大家来思考一下整体的设计、布局、触发方式和需要注意的问题 使用方法触发（非组件直接注册在 template 中使用） 不受外界样式影响（比如父级 overflow：hidde

在开发组件之前，我们需要规划好我们的全局样式变量，比如主题色以及不同状态的颜色（警告色、错误颜色、信息颜色等），以及是否你需要规划暗夜模式，这些东西都建议提前考虑。 主题色设置 我建议将 packag

原本该节准备开始开发组件，但是我希望大家能够思考一下，现在大多数的文章可能只会教你写一个 button 然后结束，但是在你自己想做一个组件库的过程中你会发现很多的坑和注意点需要前期来考虑，那我带大家来

接上回我们搭建完组件库项目，现在还剩下组件文档，因为从 0 开始搭建文档太费时间，我推荐大家使用vitepress进行快速搭建，它可以将你的 Markdown 转为文档页面，所以我们只需要写 md 文

在开始之前我们先来捋一下我们需要这个项目中有哪些东西。 组件：肯定首先想到的是要开发的组件的代码 预览：我们开发的组件要有地方可以预览，边开发边查看效果 文档：我们需要撰写组件的属性、方法等相关示例说

Monorepo 介绍 Monorepo是一种软件开发架构，可以将多个相关的代码或者组件存储在一个代码仓库中，在这个架构中每一个项目和组件都是一个目录。 npm、yarn、pnpm 这些包管理工具是用