Inspira UI?是一個(gè)基于 Vue 3 + UnoCSS 打造的 UI 組件庫，它主打“輕量級(jí)”、“高定制”和“原子化”三大特性。由前端愛好者 unovue 發(fā)起，適合追求極致靈活性與現(xiàn)代開發(fā)體驗(yàn)的前端開發(fā)者。

?整個(gè)項(xiàng)目采用?monorepo?架構(gòu)，結(jié)構(gòu)清晰，開發(fā)體驗(yàn)一級(jí)棒。不依賴任何臃腫的 UI 框架，搭配 UnoCSS 原子類，組件風(fēng)格隨便你調(diào)，想怎么搭怎么搭！

項(xiàng)目特點(diǎn)

別看它現(xiàn)在組件還不多，但設(shè)計(jì)思路非常超前，下面這些亮點(diǎn)值得你關(guān)注：

• ??Vue 3 + Vite 加持：開發(fā)體驗(yàn)就是一個(gè)字，爽！
• ??完全基于 UnoCSS：告別臃腫 CSS class，享受原子化的快樂。
• ??模塊化組件：按需引入，極致輕量。
• ? Playground 自帶組件測(cè)試環(huán)境：邊寫邊預(yù)覽，開發(fā)效率翻倍。
• ? 自定義主題輕而易舉：顏色、圓角、字體統(tǒng)統(tǒng)都能改，打造你的專屬 Design System。

技術(shù)架構(gòu)

Inspira UI 的內(nèi)部結(jié)構(gòu)也很清晰，采用了前端界最時(shí)髦的組合：

• ? 框架：Vue 3（Composition API）
• ? 樣式系統(tǒng)：UnoCSS（沒用 Tailwind，但用法類似）
• ? 構(gòu)建工具：Vite（極致快速）
• ? 包管理器：pnpm（速度快到飛起）
• ? 類型系統(tǒng)：TypeScript（不支持它都不好意思說自己是組件庫）

項(xiàng)目目錄一覽：

• ??packages/components/：核心組件源代碼
• ??packages/theme/：可定制主題配置（是的，變量你自己調(diào)）
• ??playground/：本地開發(fā)測(cè)試環(huán)境
• ??docs/：未來將用于構(gòu)建在線文檔站（目前暫無內(nèi)容）

已有組件

目前組件數(shù)量還處于成長初期，已包含以下常用組件：

• ? Button 按鈕（點(diǎn)它會(huì)開心）
• ? Input 輸入框（敲代碼之前先敲字）
• ? Icon 圖標(biāo)（UnoCSS 圖標(biāo)系統(tǒng)集成）
• ? Modal 模態(tài)框（彈窗選手登場(chǎng)）
• ? Tooltip 提示框（貼心小提示）

未來計(jì)劃支持 Table、Tabs、Form 等更多高級(jí)組件，值得期待！

快速上手

只需 3 步，你就可以玩起來了：

# 1. 克隆項(xiàng)目
git?clone?https://github.com/unovue/inspira-ui.git
cd?inspira-ui

# 2. 安裝依賴
pnpm install

# 3. 啟動(dòng) Playground
pnpm dev

然后就可以盡情修改組件，看效果啦！

自定義你的 Design System

不想用別人的配色和圓角？Inspira UI 專門為你準(zhǔn)備了?tokens?文件，在里面修改變量即可。

// packages/theme/tokens.ts
export?const?tokens = {
??colorPrimary:?'#10b981',?// 改成你喜歡的綠色吧
??borderRadius:?'12px', ? ??// 圓潤一點(diǎn)
??fontFamily:?'Inter, sans-serif',
}

修改完自動(dòng)生效，無需重復(fù)編譯，開發(fā)體驗(yàn)超絲滑。

適合人群

• ? 想做自己的 UI 庫，但不想從頭造輪子的前端小伙伴
• ? Vue 3 + Vite 項(xiàng)目使用者，追求靈活輕便的組件方案
• ? 不喜歡太“企業(yè)味”UI，希望打造美而獨(dú)立界面的創(chuàng)意型開發(fā)者

源碼地址

https://github.com/unovue/inspira-ui

小結(jié)一下

Inspira UI 是一個(gè)正在快速成長的 Vue 組件庫，它靈活、現(xiàn)代、極具個(gè)性，非常適合用來打造個(gè)性化項(xiàng)目或者作為團(tuán)隊(duì)內(nèi)部 UI 基礎(chǔ)設(shè)施。雖然目前組件還不多，但設(shè)計(jì)理念先進(jìn)，潛力無限。

如果你喜歡 UnoCSS 的開發(fā)體驗(yàn)，又在用 Vue 3，不妨 clone 一下這個(gè)項(xiàng)目試試！

[超站]友情鏈接：

四季很好，只要有你，文娛排行榜：https://www.yaopaiming.com/
關(guān)注數(shù)據(jù)與安全，洞悉企業(yè)級(jí)服務(wù)市場(chǎng)：https://www.ijiandao.com/