3个月之前，我们在社区发了一篇文章，正式发起了 Vue DevUI 项目。让我们一起建设 Vue DevUI 项目吧！

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

• Vite
• Vue3
• TypeScript
• JSX

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

vue-devui@0.1.0

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

特别感谢以下小伙伴的贡献：

• brenner8023
• flxy1028
• kagol
• to0simple
• Zcating

接下来同步下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头像组件

以下是网站的效果图：

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

https://gitee.com/devui/vue-devui/releases/v0.2.0

优化和规范

目前 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>

效果图：

以下是该项目的源码：

https://gitee.com/devui/vue-devui

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

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

https://github.com/devcloudfe/ng-devui

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

预告

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

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