对于组件库的思考及技术梳理详解

目录
  • 为什么要做？
  • 组件库的技术选型
    • 组件库的方向
    • 组件库的设计
  • 结语

为什么要做？

18年的时候觉得写ui组件库的人都好牛，出于好奇看了elementui、iview和Vant的源码。从那之后就萌生了自己也可以尝试搭个组件库试试，一是可以学习到很多知识，二是可以向牛人靠齐。可那时候又是个菜鸟，从0到1搭建对我来说是件很难的事情。当时借助从vue-cli创建的项目，做了修修改改，这样简单的组件库就出来了vvmui，现在回头看看那时候做的东西是真的菜。。。

近些年来，随着前端项目的复杂度越来越高，前端工程化的概念也被越来越重视，在很多面试中也会问到对前端工程化的理解。稍微有点规模的团队都会设计出一套适合当前业务需求的前端架构，开发、规范、测试、lint、构建、部署、监控、集成、微服务等等。所以自己从0到1搭建个组件库可以学到。

  • lint规范的接入，prettier的格式化统一，husky的卡点校验。
  • Monorepo多包代码风格的项目管理。
  • 组件的单元测试。
  • 发布自己的工具包到npmjs市场。
  • 使用 Github Action 完成 CI/CD。
  • 灵活的利用打包工具，vite、gulp等等。

组件库的技术选型

因为之前接触过lerna+yarn的Monorepo代码风格项目，所以这次在组件库的搭建上会尝试使用pnpm。至于pnpm就不给大家介绍了，不了解的可以自行到pnpm官网了解。个人认为，pnpm对内存管理的优化简直是Mac用户的救兵。才用了两三年的电脑，内存已被使用不少了。

组件库的方向

组件库会选择做移动端，其次会从多端的方向去做，支持H5、Taro。通过Taro的多端机制去适配多端，如果有时间的话还会考虑支持uni-app。

我为什么会选择移动端方向？

我一直认为PC端的组件库是非常成熟了，特别是在表单收集方面的组件是非常成熟而且规范。在移动端上表单收集的组件以及表单校验的交互细节就变得非常复杂了。开源组件本身的设计与业务不符合，就会让开发者陷入被动。所以我一直希望自己能完整开发一些通用的组件，让我在下次接触到类似的组件时，虽然业务设计有出入，但我也不会变的无从下手。

组件库的设计

结语

首先自己做组件库并不是为了炫技，开源的组件库已经非常多了，重复造轮子的意义不大。但是这个从0到1的过程，不仅让自己学到了很多东西，而且也是热爱自己这一行的一种表现。如果只是为了在这一行混口饭吃，各种开源的轮子已经能解决你遇到的大部分问题了。

其次，在写这篇文章的时候，组件库的完成度已经接近70%了。写作水平差更新的慢，有问题请轻喷。

最后，后面觉得差不多了会把代码仓库的地址补上，还有组件库的在线体验地址。

相关文章

Monorepo风格的组件工程搭建

以上就是对于组件库的思考及技术梳理详解的详细内容，更多关于组件库技术梳理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 7个适用于Vue 3的高颜值UI组件库

    目录 前言 Element Plus Ant Design Vue Naive UI VARLET NutUI Vant Arco Design 总结 前言 Vue 3.0 已经发布两年多的时间,今年 2 月 Vue 3.0 也正式成为新的默认版本.今天就来分享 7 个适用于 Vue 3 的高颜值 UI 组件库! Element Plus Element Plus 是一套由饿了么开源出品的为开发者.设计师和产品经理准备的基于 Vue 3.0 的组件库.Element Plus 使用 TypeSc

  • Vue3组件库框架搭建example环境的详细教程

    Vue3组件库框架搭建example环境的详细教程

    目录 1 搭建 example 开发环境 1.1 创建 example 项目 1.2 修改 package.json 1.3 修改 vite 配置文件 1.4 多环境支持 1.5 测试启动服务 2 测试 foo 组件 2.1 安装依赖 2.2 引入组件库 2.3 使用组件 2.4 运行查看效果 3 example 打包构建 前面用了大量篇幅介绍组件库的开发环境搭建,包括:创建组件.创建组件库入口.组件库样式架构.组件库公共包,做了一大堆工作,还不能预览示例组件 foo,本文便搭建 example

  • Vue引入并使用Element组件库的两种方式小结

    目录 前言 Element-ui(饿了么ui) 安装element-ui 引入element-ui 完整引入element-u 按需引入element-ui 总结 前言 在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中用的很多的,下面就介绍下如何在eue项目中引入element-ui组件库 Element-ui(饿了么ui) element-ui(饿了

  • 对于组件库的思考及技术梳理详解

    目录 为什么要做? 组件库的技术选型 组件库的方向 组件库的设计 结语 为什么要做? 18年的时候觉得写ui组件库的人都好牛,出于好奇看了elementui.iview和Vant的源码.从那之后就萌生了自己也可以尝试搭个组件库试试,一是可以学习到很多知识,二是可以向牛人靠齐.可那时候又是个菜鸟,从0到1搭建对我来说是件很难的事情.当时借助从vue-cli创建的项目,做了修修改改,这样简单的组件库就出来了vvmui,现在回头看看那时候做的东西是真的菜... 近些年来,随着前端项目的复杂度越来越高,

  • Java远程调用组件Feign技术使用详解

    目录 一. 概要 二. Feign简介 1. 概念 2. 功能 三. 服务提供者 1. 添加依赖 2. 配置文件 3. 启动类 4. 控制层 5. POJO 四. 服务消费者 1. 添加依赖 2. 配置文件 3. 启动类 4. Feign服务 5. 控制层 五. 测试 1. 测试get请求 2. 测试post请求json数据格式 3. 测试头部中包含信息 一. 概要 我们知道,现在最火且最有技术含量的技术莫过于SpringCloud微服务了,所以今天壹哥就带大家来学习一下微服务的核心的组件之一,

  • Java字节码增强技术知识点详解

    简单介绍下几种java字节码增强技术. ASM ASM是一个Java字节码操控框架,它能被用来动态生成类或者增强既有类的功能.ASM可以直接产生class文件,也可以在类被加载入Java虚拟机之前动态改变类行为.ASM从类文件中读入信息后,能够改变类行为,分析类信息,甚至能够根据用户要求生成新类. 主页:https://asm.ow2.io/index.html ASM框架中的核心类有以下几个: ① ClassReader:该类用来解析编译过的class字节码文件. ② ClassWriter:

  • Java绘图技术的详解及实例

    Java绘图技术的详解及实例

    Java绘图技术的详解及实例 简单实例 public class Demo1 extends JFrame{ MyPanel mp=null; public static void main(String[] args){ Demo1 demo=new Demo1(); } public Demo1(){ mp=new MyPanel(); this.add(mp); this.setSize(400,300); this.setDefaultCloseOperation(JFrame.EXIT

  • ASP.NET Core扩展库之日志功能的使用详解

    上一篇我们对Xfrogcn.AspNetCore.Extensions扩展库功能进行了简单的介绍,从这一篇文章开始,我将逐步介绍扩展库中的核心功能.     日志作为非业务的通用领域基础功能,有非常多的技术实现,这些第三方库避免了我们花费时间去重复实现,不过,很多日志库配置复杂,不易于使用,入手较难,而有些库可能与ASP.NET Core的结合并不好.     如果我们没有对所使用的日志库进行详细了解,日志库也可能产生严重的问题,在我的开发生涯中,曾经遇到过多次因为日志库而导致的生产事故.  

  • Android 第三方库lottie、mmkv的使用详解

    Android 第三方库lottie、mmkv的使用详解

    Android端使用方法 首先,需要在当前项目的build.gradle下添加依赖代码: implementation 'com.airbnb.android:lottie:2.8.0' 其次,Lottie默认读取Assets中的文件,我们需要把设计导出的动画文件.json 保存在app/src/main/assets文件里.若没有assets文件,则新建一个如下图: 在assets添加images文件夹,并将json中需要用的的图片放入其中,注意,图片名要于json中保持一直. 最后,在布局x

  • victoriaMetrics库布隆过滤器初始化及使用详解

    victoriaMetrics库布隆过滤器初始化及使用详解

    目录 victoriaMetrics库布隆过滤器 概述 限速器的初始化 总结 victoriaMetrics库布隆过滤器 代码路径:/lib/bloomfilter 概述 victoriaMetrics的vmstorage组件会接收上游传递过来的指标,在现实场景中,指标或瞬时指标的数量级可能会非常恐怖,如果不限制缓存的大小,有可能会由于cache miss而导致出现过高的slow insert. 为此,vmstorage提供了两个参数:maxHourlySeries和maxDailySeries

  • 无UI 组件Headless框架逻辑原理用法示例详解

    目录 概述 精读 总结 概述 Headless 组件即无 UI 组件,框架仅提供逻辑,UI 交给业务实现.这样带来的好处是业务有极大的 UI 自定义空间,而对框架来说,只考虑逻辑可以让自己更轻松的覆盖更多场景,满足更多开发者不同的诉求. 我们以 headlessui-tabs 为例看看它的用法,并读一读 源码. headless tabs 最简单的用法如下: import { Tab } from "@headlessui/react"; function MyTabs() { ret

  • react装饰器与高阶组件及简单样式修改的操作详解

    使用装饰器调用 装饰器 用来装饰类的,可以增强类,在不修改类的内部的源码的同时,增强它的能力(属性或方法) 装饰器使用@函数名写法,对类进行装饰,目前在js中还是提案,使用需要配置相关兼容代码库. react脚手架创建的项目默认是不支持装饰器,需要手动安装相关模块和添加配置文件 安装相关模块 yarn add -D customize-cra react-app-rewired  @babel/plugin-proposal-decorators 修改package.json文件中scripts

  • Vue组件间的样式冲突污染问题详解

    默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 导致组件之间样式冲突的根本原因是: 单页面应用程序中,所有组件的dom结构,都是基于唯一的index.html页面进行呈现的. 每个组件中的样式,都会影响整个index.html页面中的dom元素. 给left.vue文件中的p标签添加一个字体样式 <template> <div> <p >left组件</p> <MyCount :num="4&quo

随机推荐