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

⚠️注意：該版本還不完善，不可用於生產環境。

特別感謝如下小夥伴的貢獻🎉🥳：

• brenner8023
• flxy1028
• kagol
• to0simple
• Zcating

接下來彙報下Vue DevUI目前的進展狀況，歡迎感興趣的小夥伴參與到 Vue DevUI 項目的建設中來！👏🎉

經過參與 Vue DevUI 項目，你能夠：

• 學習最新的 Vite+Vue3+TSX 技術
• 學習如何設計和開發組件
• 參與到開源社區中來
• 結識一羣熱愛學習、熱愛開源的朋友

新增組件

通用組件：

1. Button按鈕組件
2. Panel面板組件

導航組件：

3. Tabs選項卡組件

反饋組件：

4. Alert警告組件

數據錄入組件：

5. CheckBox複選框組件
6. Radio單選框組件
7. Switch開關組件
8. TagsInput標籤輸入組件
9. TextInput文本框組件

數據展現組件：

10. Avatar頭像組件

如下是網站的效果圖：

詳細的 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>
複製代碼

效果圖：

如下是該項目的源碼：

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號重磅發佈，提供了一項神奇的黑科技，讓咱們拭目以待吧！