Vue DevUI 已经有10个组件成员啦~🥳😋

前端组件库 @ 华为

3个月之前,我们在掘金发了一篇文章,正式发起了 Vue DevUI 项目。让我们一起建设 Vue DevUI 项目吧!🥳

很快就有不少热爱开源的小伙伴参与进来,于是我们迅速成立了Vue DevUI 核心成员小组,一起讨论出了Vue DevUI组件库的技术栈:

  • Vite
  • Vue3
  • JSX

到目前为止该小组已发展到46名成员,Vue DevUI 组件库也新增了10个组件成员,并在npm发布了v0.1.0版本:

vue-devui@0.1.0

⚠️注意:该版本还不完善,不可用于生产环境。

特别感谢以下小伙伴的贡献🎉🥳:

接下来汇报下Vue DevUI目前的进展情况,欢迎感兴趣的小伙伴参与到 Vue DevUI 项目的建设中来!👏🎉

通过参与 Vue DevUI 项目,你可以:

  • 学习最新的 Vite+Vue3+TSX 技术
  • 学习如何设计和开发组件
  • 参与到开源社区中来
  • 结识一群热爱学习、热爱开源的朋友

新增组件

通用组件:

  1. Button按钮组件
  2. Panel面板组件

导航组件:

  1. Tabs选项卡组件

反馈组件:

  1. Alert警告组件

数据录入组件:

  1. CheckBox复选框组件
  2. Radio单选框组件
  3. Switch开关组件
  4. TagsInput标签输入组件
  5. TextInput文本框组件

数据展示组件:

  1. Avatar头像组件

以下是网站的效果图:

demo.png

api.png

详细的 Release Notes 信息可以参考:

gitee.com/devui/vue-d…

优化和规范

目前 Vue DevUI 组件库项目已增加以下规范:

  1. Jest 单元测试
  2. ESLint 代码规范
  3. StyleLint 样式规范
  4. ls-lint 文件夹/文件命名规范
  5. CommitLint 代码提交规范

快速开始

快速开始三部曲:

  • 安装
  • 引入
  • 使用

安装 vue-devui

npm i vue-devui
# npm i vue-devui --registry=https://registry.npm.taobao.org/
复制代码

引入 vue-devui

main.ts

import { createApp } from 'vue'
import App from './App.vue'

// 引入 Vue DevUI 组件库
import DevUI from 'vue-devui'
import 'vue-devui/style.css'

// 使用vue-devui
createApp(App).use(DevUI).mount('#app')
复制代码

使用 Button 组件

App.vue

<d-button>确定</d-button>
复制代码

效果图:

devui button.png

以下是该项目的源码:

gitee.com/devui/vue-d…

参与贡献可以加小助手微信:devui-official,拉你进Vue DevUI核心成员小组~😋😋

欢迎关注我们DevUI组件库,点亮我们的小星星🌟:

github.com/devcloudfe/…

也欢迎使用DevUI新发布的DevUI Admin系统,开箱即用,10分钟搭建一个美观大气的后台管理系统!

预告

DevUI 将于本月10日发布 DevUI 12 版本,除了升级 Angular 12 之外,更有超多有趣的新特性,尽情期待!

DevUI Admin 2.0 版本也将在本月17号重磅发布,提供了一项神奇的黑科技,让我们拭目以待吧!

文章分类
前端