绯色天空

在前端布局中，栅格系统还是很常见的，对于响应式布局，尤为重要，下面记录一下实现vue栅格系统组件。 我们采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题

手把手带你撸一个简易 Grid 拖拽布局。最近有个需求需要实现自定义首页布局，需要将屏幕按照 6 列 4 行进行等分成多个格子，然后将组件可拖拽对应格子进行渲染展示。

什么是响应式？同一个页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就好了，缺点是CSS比较重。 栅格系统用于处理页面多终端适配的问题。栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力…

前言🚴‍♀🚴‍♀ 之前在写项目的时候，用到了element-plus，在这个项目中需要使用tabs组件，于是我便萌生了一个想法:自己封装一个tabs组件，感觉应该也不是很难。

关于后台的编辑功能，大致分为两部分：`组件拖拽预览`、`组件内容编辑实时预览`。 对于组件拖拽预览，用户可以在含有各种功能组件的列表中，选择需要的组件进行拖拽。

组件在前端开发中越来越重要了，开发者更细分、聚焦于组件层面的开发，然后像搭积木一样完成应用功能。组件库可以统一管理组件，输出文档，能提升组件复用性、避免重复造轮子。赶快搭建自己的组件库吧，这瓜保甜！

组件库完结篇，附带线上演示！捣鼓了半个月，终于像点样子了。从架构设计、组件开发到文档建设，整个组件库的0-1过程笔者通过文章的方式进行记录、分享，有兴趣的朋友赶紧动起手来，搞一个属于自己的组件库吧～

在vue项目中，多个项目会有一些公共的组件，我们如何将其打包成一个组件库维护起来呢？ 如何暴露组件类型，按需自动导入又是如何实现的？这篇文章我们一起来学习一下。

前言 前面篇章我们已经完成了开源组件库编码，接下来需要做的是打包发布到 NPM 上。编译打包 组件库需要做 2 种打包方式：全量打包、单组件打包，以提供给第三方调用者灵活选择。