likes
comments
collection
share

如何在1分钟之内创建一个符合规范的DevUI组件

作者站长头像
站长
· 阅读数 15

如何在1分钟之内创建一个符合规范的DevUI组件

Vue DevUI是一个社区共建的Vue3开源组件库，目前包含

  • 185名贡献者(github+gitee)，田主群里有70位
  • 73个组件，开放出去的有48个

目前vue-devui已经处于rc阶段，最新版本是v1.0.0-rc.9。

那么多人一起开发，如何确保一致性和避免冲突呢？

答案就是：

  • 完善的CLI命令行工具
  • 详细的贡献指南和开发规范文档
  • 开放的、鼓励沟通和讨论的社区氛围

如何在1分钟之内创建一个符合规范的DevUI组件

本文给大家介绍下我们的DevUI CLI命令行工具，如何在1分钟之内创建一个符合规范的DevUI组件。

一行命令创建组件目录结构

在Vue DevUI源码根目录下执行以下命令：

cd packages/devui-vue && pnpm cli:create

进入创建组件的交互式界面：

如何在1分钟之内创建一个符合规范的DevUI组件

第一个需要填写的是组件的名字(英文名)，比如我们想要创建一个Steps步骤条组件，就输入steps，这个名字会用于常见组件目录和相应的文件。

输入完按Enter进入下一个问题：输入组件的中文名，比如就叫步骤条，这个名字会用在组件的文档中。

输入完按Enter进入下一个问题，这次不是输入，而是选择一个组件的分类：

  • 通用
  • 导航
  • 反馈
  • 数据录入
  • 数据展示
  • 布局

通过键盘的方向键可以进行选择，比如选择数据展示。

如何在1分钟之内创建一个符合规范的DevUI组件

选择完按Enter进入选择组件包含的部件的界面，这是一个多选，选择步骤如下：

  • 还是通过方向键选择
  • 通过按空格键确认选择该选项（还可以按a多选、按i反选）
  • 最后通过按Enter最终确认选择哪几项

我们只选择component(组件)即可。

如何在1分钟之内创建一个符合规范的DevUI组件

选完按Enter，顺利的话，会提示Steps组件创建成功！

如何在1分钟之内创建一个符合规范的DevUI组件

看看都创建了哪些文件

通过git diff命令，我们可以看到创建了两个目录，分别是组件源码和文档目录：

packages/devui-vue/devui/steps/          # 组件源码
packages/devui-vue/docs/components/steps # 组件文档

创建好的目录结构如下：

   ├── docs
   |  ├── components
   |  |  ├── steps
   |  |  |  └── index.md       # 组件文档
   ├── devui
   |  ├── steps
   |  |  ├── index.ts          # 组件入口文件
   |  |  ├── src               # 组件源码
   |  |  |  ├── steps-types.ts # 组件类型文件
   |  |  |  ├── steps.scss     # 组件样式文件
   |  |  |  └── steps.tsx      # 组件文件
   |  |  └── __tests__         # 组件单元测试
   |  |     └── steps.spec.tsx # 组件单元测试文件

组件目录和文件的组织、每个文件的命名、文件里面代码的组织等都遵循统一的开发规范，负责该组件的田主只需要基于这个目录结构进行组件功能和api的完善即可。

保障项目一致性的“秘密”

便捷的CLI命令行工具只是保障一致性的第一步，Vue DevUI 组件库还集成了eslint/lslint/commitlint等大量一致性检查的工具，最大限度保障从组件的api/demo设计、组件编码、组件文档、组件单元测试、代码提交等开发流程的一致性，并形成相应的配置文件和开发规范文档。

当然工具是死的，人才是最关键的，我们的田主来自全国各地，背景、经历各不相同，相同的是大家都是一群热爱开源、热爱学习、乐于讨论和协作的年轻人，大家都愿意为了让项目变得更好而使用工具和遵循规范，而且我们的工具和规范本身也是田主们一起讨论和实现出来的。

贡献者招募

Vue DevUI 还在持续完善中，还有很多组件的功能有待完善，欢迎你参与到 Vue DevUI 项目的建设中来！🎉

通过参与 Vue DevUI 项目，我们可以一起：

  • 🔥 学习最新的 Vite+Vue3+TypeScript+JSX 技术
  • 🎁 学习如何设计和开发组件
  • ⭐ 磨练编程技能，学习优秀的编程实践
  • 🎊 结识一群热爱学习、热爱开源的朋友

目前以下组件比较活跃，欢迎一起共建：

也可以在以下 issues 列表中认领组件开发任务： github.com/DevCloudFE/…

欢迎加DevUI小助手微信：devui-official，加入我们的技术交流群！