我们正在开发一套组件库，欢迎你的加入~

image.png

项目地址

github地址
可以先点进来康康~

技术栈

目前我们整体采用的是vue3+typescript+less作为整体的开发的选择

需要说的是，我们并没有采用很多组件库采用的TSX的写法，而是选择了SFC的写法，这是因为我们觉得对于大部分的vue开发者来说，可能template的写法已经深入到大家的开发思想之中，所以我们想让更多的人参与进来，这是我们的一个初衷。

当然，现在有另一群小伙伴已经开始到了React端的建设之中，感谢大家的努力！在vue端建设丰富之后，我们会商讨接下来的计划，来决定要不要团队的一部分人去投入到多端的工作之中，这可能要取决于我们最初组织者的初衷和未来的发展计划。

初衷

我们的组织者是一个UI大大“yike”，这里放一下他的小破站的地址。

这套组件库最开始创建的原因非常简单。就是作为一名设计人员，出于对前端组件的好奇，希望有一套属自己的组件库，用以表达自己的设计。但实践过程中个人的力量终究是有限的，团队的力量是无穷的，现在开源出来期待与大家一起建设它。希望能用团队的力量，不断完善这个项目。

那么，现在就会说到另一个话题：现在组件库这么多，而且基本是几家独大，那么这样做下去的意义在哪里？

这也是我们一开始开会就在讨论的问题，目前我们的计划还是，先开发基础组件，开发完技术组件后，我们会开发一些有意思的功能性组件，类似用户组件、登录组件、评论组件、富文本等等，这也是我们需要先开发基础组件的原因。

我觉得我们和目前主流的组件库侧重点是不一样的，他们是为了将基础的业务组件做到更好，做到一种极致，而我们更多是想开发一些通用性并不那么强的，好玩的一些东西。

我觉得我们是有优势的，毕竟我们有着专业的UI，可以做更好的设计、交互体验以及UI走查，UI设计这也是我们最注重的一点~

项目的重构

我们现在的项目是基于之前的项目重构的，因为之前的项目耦合度较强，规范度是不够的，所以在这两周，我们都是着重于项目的重构计划之中。

我们觉得monorepo的模式是很符合我们这个项目的，所以项目采用了比较主流的monorepo，关于monorepo并不是这篇文章介绍的重点，如果并不是特别了解的小伙伴可以看看相对应的文章。

目录结构

image.png

我们可以先稍微整体地看一下目录

文档

需要说一下的是这个demo的工程

image.png

这个demo工程主要是用来存放项目的文档，这里需要说的是，我们之所以没有采用vitepress或者是vuepress来快速建站是因为文档在最开始已经由我们的yike设计并创建好了，当初是比较费心费力的，而且我们如果用vitepress的话，可能也会进行大量的样式更改，所以干脆保留了最初的这个方案，并进行文档方面的维护。

这里也给大家展示一下文档效果

image.png

image.png

image.png

image.png

并且文档也有着对应的书写规范，文档是由大飞hxd来创建规范和管理的，我们一致认为他做的非常好！

文档目录结构

文档目录应该按照以下结构进行组织：

- /demo/src/examples/button: 根目录，包含组件示例和文档|- /button: 按钮组件目录|- doc.md: 按钮组件文档|- button-example1.vue: 按钮组件示例文件1|- button-example2.vue: 按钮组件示例文件2|- ...|- /component2: 第二个组件目录|- doc.md: 第二个组件文档|- component2-example1.vue: 第二个组件示例文件1|- component2-example2.vue: 第二个组件示例文件2|- ...

每个组件目录下都应该包含一个 doc.md 文件和若干示例文件

组件文档 doc.md

组件文档使用 Markdown 格式编写，提供关于组件的说明、用法、API 等相关信息。以下是一个组件文档的基本结构示例：

### yk-button 按钮  （文档首页标题）:::snippet  （每个demo对应信息采用 :::snippet::: 标志位进行维护）
按钮类型 type
按钮有三种类型：`主按钮` 、`次按钮` 、`线框按钮` 。主按钮在同一个操作区域建议最多出现一次。
<ButtonPrimary/>
::::::snippet 
按钮尺寸 size
按钮分为：`s`、`m`、`l`、`xl` 四种尺寸。高度分别为：`24px`、`32px`、`36px`、`48px`。默认尺寸为 l。
<ButtonSize/>
::::::snippet 
title
desc
<DemoFileName/>
:::
...### API (API标题)通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：type -> size -> shape -> status -> disabled。 (API说明)|参数      | 描述     | 类型     | 默认值 | (md表格结构)
| ------------------ | ----------------- | ---------------| ---------------- |
| type | 按钮的类型   | 'primary'或'secondary'或'outline'   | primary |
| 单元格信息 | 单元格信息 | 单元格信息 | 单元格信息 |
| 单元格信息 | 单元格信息 | 单元格信息 | 单元格信息 |

  • 每个demo对应信息采用 :::snippet::: 标志位进行维护

  • 单个demo在doc.md中维护的信息有

    • Title: demo标题，说明该组组件demo共性
    • Desc: demo说明，支持md格式
    • DemoName demo名称，采用驼峰命名法的单标签，必须为文档目录下存在的文件，否则可能存在解析报错

  • 每个demo文件只可在doc.md中引入一次

md文档加入vue-router

{path: 'button',component: () => import('@/example/button/doc.md'),},

对应效果

补充

7.10日新增 :::pure::: 标记符号，该标记位将直接渲染内部demo组件并自动引入相关依赖，具体用例如下

### 线性图标展示
复制对应图标下的名称获取该图标。
:::pure
<IconPrimary/>
:::

应用效果

yk-design-ui主工程

然后在packages下就是我们主要的组件库工程了

image.png

目前我们暂定的目录结构如下

image.png

当然，我们现在的工程已经基于目录结构进行了一些展开的工作

比如我们对样式已经做了进一步的抽离，以及一些公共的type我们也放到了constant.ts下

image.png

image.png

并且我们已经对每个组件的props进行了类型的抽离，并且现在已经在书写时已经有了良好的类型提示。

我们觉得一些良好的代码设计，可以在巨人的肩膀上进行下一步工作，比如我们会借鉴element-plus的很多处理方式，但是我们并不会完全地去抄他的业务代码，这没有什么意义。

需要提一下的是，我们虽然有单元测试的计划，但是目前被搁置了，因为我们还是打算全部都迁移完成之后，再去进行细致的工作，而单元测试我已经集成了vitest，它十分的简单，大家也可以快速地进行学习。在接下来的工作中，我们会考虑开始进行单测工作。

代码规范化工作

其实我们并没有做特别多的代码规范化的工作，但是我们仍然对一些必要性的规范有一定的要求

  • eslint
  • prettier
  • stylelint
  • commitlint
  • pr规范

这些配置我们已经配置完了，现在只需要大家在书写的时候进行检查工作即可，并且在pr的时候注意一下提交的规范即可

我们目前并没有做更多的工作，比如强制你去使用pnpm，强制走单测等。为此也是希望更多的人能够参与进来，但是我们仍希望你对自己是有规范要求的，比如良好的代码风格，BEM规范等等，那么这会减少我们去审核pr的时间。

接下来的工作计划

我们的开发工作有团队基于飞书的文档，也有着供大家可看的在线的腾讯文档，并且也在CoDesign上放置了设计稿。

image.png

image.png

image.png

现在我们还是在进行组件的迁移工作，但是已经有很多小伙伴已经开发了新的组件，我们也在积极地审核pr。

在近两天我会完成所有打包的工作，并且去考虑发布到npm上，让大家更方便地去使用。

预计这两周所有组件迁移完成的前提下，可能会开发一些新的组件，当然，这需要大家共同的努力！

并且在新一轮的工作中，我会单开出一个分支进行单元测试，保证良好的单元测试覆盖率。

在这周我们会重新书写一下README文件，当然，这都是小事啦。

并且我们这两周会进行开会，讨论接下来的发展任务，可能会单开出分支，由一部分人用来开发功能性组件，另一部分继续基础组件的开发过工作，但是，在这个过程中，可能需要yike进行比较高强度的设计工作，所以我们也希望，如果你有UI的功底的话，也可以加入进来！

我们深知这个项目是有很多不足的！我们的开发能力是有限的，有UI，有在校学生，大部分的人，并没有多年的开发经验和代码实力，我们也知道有着很多需要改进的地方，但是我们的目标是一致的！所以我们更多的是抱着学习的态度，来听从大家的建议！更加希望如果你有这个实力并且也有这个想法的话，来加入我们，甚至提一下issue和pr都是很好的！

致谢

感谢大家这段时间以来的工作，大部分成员都是把自己的业余时间都拿出来来做这个项目，当然，我这里也不一一去提了，Contributions里面写的也是比较清晰的！

希望大家继续努力，让这个项目继续发酵下去！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/1070.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

MySQL八股学习记录4事务的实现from小林coding

MySQL八股学习记录4事务的实现from小林coding

MySQL八股学习记录4事务的实现from小林coding 事务的概念与特性并行事务引发的问题脏读不可重复读幻读 MySQL的应对策略InnoDB引擎可重复读详解ReadView在MVCC中的工作方式两种隔离级别通过MVCC实现幻读被完全解决了吗 事务的概念与特性 概念:一个操作要么执行成功,要么回滚到…
阅读更多...
ORACLE实时SQL监控视图

ORACLE实时SQL监控视图

引言 实时的SQL监控&#xff08;Real Time SQL Monitoring&#xff09;是Oracle 11g的一个新特性&#xff0c;它是一项强大的工具&#xff0c;用于监视和分析正在执行的SQL语句的性能和执行计划。该功能允许我们实时地跟踪SQL查询的执行过程&#xff0c;以及了解其资源消耗、等…
阅读更多...
Java的五种数据类型解析

Java的五种数据类型解析

Java的五种数据类型解析 不知道大家对java的简单数据类型是否了解&#xff0c;下面针对Java的五种类型简单数据类型表示数字和字符&#xff0c;进行详细的讲解和分析。 一、简单数据类型初始化 在Java语言中&#xff0c;简单数据类型作为类的成员变量声明时自动初始化为默认值…
阅读更多...
Ext JS中定义和使用类Ext JS风格的html 按钮

Ext JS中定义和使用类Ext JS风格的html 按钮

Ext JS 的按钮样式如下： 按钮的背景色默认为应用的主色调或是灰色系， 也可以通过样式设置按钮的背景色， 详细可以参考： Ext JS 如何设置工具栏按钮和一般按钮保持统一样式 但是， 在实际开发的场景中有可能某些按钮是不能通过Ext JS的Button 类进行创建的， 但是页面效果…
阅读更多...
leetcode第354场周赛补题

leetcode第354场周赛补题

6889. 特殊元素平方和 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;模拟 class Solution { public:int sumOfSquares(vector<int>& nums) {int res 0;for(int i 0; i < nums.size(); i ){if(nums.size() % (i 1) 0) res nums[i] * nums[i];}r…
阅读更多...
SQL Server 存储过程

SQL Server 存储过程

Transact-SQL中的存储过程&#xff0c;非常类似于Java语言中的方法&#xff0c;它可以重复调用。当存储过程执行一次后&#xff0c;可以将语句缓存中&#xff0c;这样下次执行的时候直接使用缓存中的语句。这样就可以提高存储过程的性能。 存储过程的概念 存储过程Procedure是…
阅读更多...
如何快速入门「组织结构图」？

如何快速入门「组织结构图」？

组织结构图&#xff0c;对于公司老板和HR可谓是家常便饭&#xff0c;公司发展好&#xff0c;组织结构要升级和调整&#xff0c;人员“正常”流动&#xff0c;都需要用到它。组织结构图可以让人快速的了解公司的行政结构和权利体系&#xff0c;也是让新员工或客户快速了解公司相…
阅读更多...
JAVA+Selenium最简单的处理登录弹窗的方式

JAVA+Selenium最简单的处理登录弹窗的方式

在做自动化测试遇到需要处理登录弹窗情况&#xff0c;例如我的用户名为admin, 密码为admin, 那么想要登录http://10.10.168.1, 只需要使用以下链接访问即可立即登录, 并免除弹窗: http://账号:密码网址
阅读更多...
python-函数用法-F.conv_transpose2d

python-函数用法-F.conv_transpose2d

F.conv_transpose2d torch.nn.functional.conv_transpose2d(input, weight, biasNone, stride1, padding0, output_padding0, groups1, dilation1) → Tensor对由多个输入平面组成的输入图像应用二维转置卷积算子, 有时也称为反卷积. >>> # With square kernels and…
阅读更多...
C#设计模式之---外观模式

C#设计模式之---外观模式

外观模式&#xff08;Facade Pattern&#xff09; 外观模式&#xff08;Facade Pattern&#xff09;提供了一个简单且公用的接口去处理复杂的子系统&#xff0c;并且没有减少子系统的功能。降低子系统的复杂性&#xff0c;避免了客户与子系统直接链接&#xff0c;它也减少了子…
阅读更多...
composer的劈坑

composer的劈坑

现在是php8盛行的天下&#xff0c;安装php8我就不多说了&#xff0c;宝塔、小出面板一大堆&#xff0c;一键安装。真心说方便。&#xff08;好吧&#xff0c;不打广告了&#xff09;&#xff0c;以下是针对 linux 系统 1、安装composer 安装composer之前&#xff0c;需要要先在…
阅读更多...
Android 13 设置自动进入wifi adb模式

Android 13 设置自动进入wifi adb模式

Android 13 设置自动进入wifi adb模式 文章目录 Android 13 设置自动进入wifi adb模式一、前言&#xff1a;二、解决Android 13 wifi adb每次重启自动重置问题方法1、分析系统中每次重置wifi adb属性的代码2、在开机广播里面进行设置wifi adb 相关属性&#xff08;1&#xff09…
阅读更多...
wpf控制垂直滚动条到最上方

wpf控制垂直滚动条到最上方

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 使用场景上代码 使用场景 wpf项目中有个datagrid列表&#xff0c;当数据出现垂直滚动条时拉倒最下方&#xff0c;现在当数据刷新时需要自动返回到数据最上方。 提示…
阅读更多...
Unity VR 开发教程 OpenXR+XR Interaction Toolkit（八）手指触控 Poke Interaction

Unity VR 开发教程 OpenXR+XR Interaction Toolkit（八）手指触控 Poke Interaction

文章目录 &#x1f4d5;教程说明&#x1f4d5;XR Poke Interactor&#x1f4d5;与 UI 进行触控交互⭐添加 Tracked Device Graphic Raycaster 和 XR UI Input Module 让 UI 可被交互 &#x1f4d5;与物体进行交互⭐XR Simple Interactable⭐XR Poke Filter 往期回顾&#xff1a…
阅读更多...
Mysql四种常见备份表方式，历史表

Mysql四种常见备份表方式，历史表

1、将表备份到物理机 mysqldump -h 域名 -P 端口 -u用户 -p密码 库名 表名 > /路径/表名.{$date}.bak 2、将表备份在库里面&#xff08;create复制表结构、insert复制表内容&#xff09; create table one_bak like one; 复制表结构 insert into one_bak select * from …
阅读更多...
简单工厂模式详解

简单工厂模式详解

文章目录 前言一、简单工厂模式定义二、举个例子三、简单工厂模式的缺点总结 前言 本篇我们了解一下简单工厂模式&#xff0c;它是设计模式的雏形&#xff0c;是学习设计模式的开端&#xff0c;我会结合案例说明它的设计思路。 一、简单工厂模式定义 简单工厂模式并不是GoF23…
阅读更多...
看一眼Mysql查询语句

看一眼Mysql查询语句

目录 &#x1f6fb; 查询数据 &#x1f6fb;基本查询语句 &#x1f6fb;单表查询 &#x1f695;查询所有字段 &#x1f695;查询指定字段 &#x1f695;查询指定记录 &#x1f695;带in关键字的查询 &#x1f695;带between and的范围查询 &#x1f695;带like的字符匹…
阅读更多...
【Eigen】Eigen内存对齐超详细讲解

【Eigen】Eigen内存对齐超详细讲解

Eigen是一个非常常用的矩阵运算库&#xff0c;由于使用了SSE指令集进行向量化加速&#xff0c;因此它的矩阵运算能力还是很厉害的&#xff0c;在SLAM等领域是一个不可或缺的的工具。然而&#xff0c;有时候在vector容器或者class类中使用Eigen时&#xff0c;可能会出现一些奇奇…
阅读更多...
10个在线ai文案自动生成器，轻松写出高质量原创文案

10个在线ai文案自动生成器，轻松写出高质量原创文案

在数字营销时代&#xff0c;撰写引人注目的标题和吸引人的营销文案至关重要。然而&#xff0c;写作优质文案需要耗费时间和精力。幸运的是&#xff0c;现在有许多在线AI文案自动生成器可以帮助我们快速创作出高质量的标题和营销文案。本文将介绍十款值得推荐的在线AI文案自动生…
阅读更多...
微信小程序事件点击跳转页面的五种方法

微信小程序事件点击跳转页面的五种方法

第一种:标签 这是最常见的一种跳转方式,相当于html里的a标签 <navigator url"/pages/main/main"></navigator>第二种:wx.navigateTo({})方法 1.前端wxml <button bindtap"getCeshi" type"primary"> 测试按钮 </button>…
阅读更多...
最新文章

Copyright @ 2022~2023