前言

Pixelium Design：基于Vue3的像素風(fēng)UI組件庫(kù)

Pixelium Design是一款專為Vue 3設(shè)計(jì)的像素風(fēng)格UI組件庫(kù)。我們從經(jīng)典像素游戲的視覺(jué)美學(xué)中獲取創(chuàng)作靈感，致力于將復(fù)古的像素藝術(shù)融入現(xiàn)代Web應(yīng)用界面。該項(xiàng)目旨在為開(kāi)發(fā)者提供一套可復(fù)用、高性能的像素風(fēng)格組件，幫助大家在項(xiàng)目中輕松構(gòu)建獨(dú)具特色的視覺(jué)體驗(yàn)。

圖片

如果你對(duì)像素風(fēng)格和前端開(kāi)發(fā)感興趣，歡迎為項(xiàng)目點(diǎn)個(gè)Star??。GitHub地址：github.com/shika-works…

項(xiàng)目誕生背景

作為一名資深像素游戲愛(ài)好者，我始終被早期電子游戲那種獨(dú)特的像素美學(xué)所吸引。Pixelium Design的創(chuàng)作靈感來(lái)源于我們團(tuán)隊(duì)（雖然目前主要是我個(gè)人）對(duì)像素風(fēng)格游戲的深厚情感，特別是像《寶可夢(mèng)》系列、《星露谷物語(yǔ)》以及開(kāi)羅游戲等經(jīng)典作品。這些游戲的視覺(jué)表達(dá)簡(jiǎn)潔而富有感染力，但當(dāng)前前端領(lǐng)域中專門針對(duì)像素風(fēng)格的UI組件庫(kù)相對(duì)稀缺，我們希望通過(guò)這個(gè)項(xiàng)目將這種經(jīng)典藝術(shù)形式引入現(xiàn)代Web開(kāi)發(fā)流程。

我們的核心目標(biāo)是構(gòu)建一套完整的像素風(fēng)格Vue 3組件集合，讓開(kāi)發(fā)者能夠快速在項(xiàng)目中實(shí)現(xiàn)統(tǒng)一的像素化界面效果。通過(guò)封裝常用的UI元素和交互模式，顯著降低實(shí)現(xiàn)特定視覺(jué)風(fēng)格的技術(shù)門檻。

現(xiàn)有方案的局限性與我們的改進(jìn)

NES.css的不足之處

在Pixelium Design之前，市場(chǎng)上已有NES.css等類似項(xiàng)目，但它們通常僅提供基礎(chǔ)的CSS樣式，缺乏功能完整的交互組件。開(kāi)發(fā)者仍然需要編寫大量的HTML結(jié)構(gòu)和JavaScript邏輯來(lái)實(shí)現(xiàn)交互功能，這不僅增加了開(kāi)發(fā)工作量，也提升了后續(xù)維護(hù)的復(fù)雜度。

此外，這些現(xiàn)有方案的樣式設(shè)定較為固定，難以進(jìn)行靈活調(diào)整，無(wú)法充分滿足多樣化項(xiàng)目的個(gè)性化需求。例如，顏色方案、尺寸規(guī)格等視覺(jué)屬性往往受到預(yù)設(shè)樣式的限制，制約了設(shè)計(jì)的創(chuàng)造性表達(dá)。

Pixelium Design的解決方案

為了彌補(bǔ)現(xiàn)有方案的這些不足，Pixelium Design采用現(xiàn)代前端技術(shù)棧，基于Vue 3構(gòu)建項(xiàng)目（未來(lái)穩(wěn)定后也計(jì)劃推出React版本），提供功能完備的交互組件：

• 開(kāi)箱即用的Vue組件，內(nèi)置完整的交互狀態(tài)管理；
• 支持靈活的樣式定制和主題配置系統(tǒng)；
• 提供完整的TypeScript類型支持，優(yōu)化開(kāi)發(fā)體驗(yàn)；
• 采用現(xiàn)代前端工程實(shí)踐，注重代碼質(zhì)量和長(zhǎng)期可維護(hù)性。

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

核心技術(shù)選型

我們選擇了以下技術(shù)棧，確保組件的高性能和優(yōu)秀開(kāi)發(fā)體驗(yàn)：

• Vue 3：選用Vue 3作為基礎(chǔ)框架，充分利用Composition API等新特性，提升組件的可維護(hù)性和開(kāi)發(fā)效率。
• TypeScript：項(xiàng)目完全采用TypeScript開(kāi)發(fā)，提供完整的類型定義，確保開(kāi)發(fā)過(guò)程中的類型安全。
• Canvas：核心像素效果通過(guò)Canvas實(shí)現(xiàn)，用于繪制復(fù)雜的圖形和動(dòng)畫效果，保證視覺(jué)表現(xiàn)的一致性。
• oxlint：基于Rust構(gòu)建的超快速Lint工具。
• VitePress：用于構(gòu)建交互式示例文檔。
• ts-morph + comment-parser：解析JSDoc注釋并生成API文檔。

關(guān)于CSS Houdini的考量

在技術(shù)選型過(guò)程中，我對(duì)CSS Houdini進(jìn)行了深入評(píng)估，但最終決定不在本項(xiàng)目中使用。主要障礙在于其瀏覽器兼容性尚未達(dá)到生產(chǎn)環(huán)境可用的標(biāo)準(zhǔn)。

雖然CSS Houdini通過(guò)底層API為瀏覽器提供了強(qiáng)大的CSS擴(kuò)展能力，但其規(guī)范和實(shí)現(xiàn)仍處于發(fā)展階段。目前，關(guān)鍵API在不同瀏覽器內(nèi)核中的支持程度存在顯著差異，這意味著依賴Houdini會(huì)導(dǎo)致大量用戶的瀏覽器無(wú)法正常渲染預(yù)期效果，破壞體驗(yàn)一致性。

為了確保Pixelium Design在各種環(huán)境下的穩(wěn)定性和可靠性，我最終選擇了支持度更廣、技術(shù)更成熟的Canvas方案作為替代實(shí)現(xiàn)。

像素圖標(biāo)的選擇與處理

在圖標(biāo)資源方面，Pixelium Design整合了風(fēng)格匹配的@hackernoon/pixel-icon-library和pixelarticons開(kāi)源版本兩個(gè)圖標(biāo)庫(kù)。為了優(yōu)化性能和體驗(yàn)，我們將所有圖標(biāo)預(yù)處理為SVG Vue組件，這使得圖標(biāo)支持按需引入（Tree Shaking），有效控制打包體積。開(kāi)發(fā)者可以靈活地按需或全局注冊(cè)使用這些圖標(biāo)，并通過(guò)統(tǒng)一的屬性（如size、color、spin）來(lái)控制其外觀和交互效果。

項(xiàng)目核心特色

• 純粹像素美學(xué)：嚴(yán)格遵循硬邊緣像素繪制原則，注重每個(gè)像素的精確布局，形成獨(dú)特的數(shù)字藝術(shù)風(fēng)格，還原早期數(shù)碼界面的純粹質(zhì)感。
• 靈活主題定制：提供高度可配置的主題系統(tǒng)，不僅可以自定義全局色彩方案，還能調(diào)整像素顆粒的基礎(chǔ)尺寸，輕松創(chuàng)建個(gè)性化界面。
• 深淺雙模式：完整支持淺色與深色主題切換，可設(shè)置為自動(dòng)跟隨系統(tǒng)外觀，也可在應(yīng)用內(nèi)手動(dòng)控制，確保各種光線環(huán)境下的視覺(jué)舒適度。
• OKlab色彩空間：核心漸變算法基于感知均勻的OKlab色彩空間，解決了傳統(tǒng)色域中亮度不均的問(wèn)題，確保色彩過(guò)渡平滑自然。
• 響應(yīng)式適配：采用現(xiàn)代CSS Grid與Flexbox布局技術(shù)，結(jié)合斷點(diǎn)系統(tǒng)，確保組件在各種屏幕尺寸和設(shè)備上完美呈現(xiàn)。
• Tree-shaking優(yōu)化：構(gòu)建系統(tǒng)支持先進(jìn)的Tree-shaking技術(shù)，所有組件均可獨(dú)立導(dǎo)入，自動(dòng)剔除未使用代碼，極致優(yōu)化打包體積。
• 類型安全保障：項(xiàng)目100%基于TypeScript構(gòu)建，提供完整精確的類型定義，在開(kāi)發(fā)階段捕獲潛在錯(cuò)誤，提升代碼健壯性。
• 完善文檔體系：使用VitePress構(gòu)建交互式文檔站點(diǎn)，結(jié)合標(biāo)準(zhǔn)化JSDoc注釋，自動(dòng)生成實(shí)時(shí)可用的組件示例和詳細(xì)API文檔。

組件生態(tài)概覽

• 基礎(chǔ)通用組件

圖片

• 數(shù)據(jù)輸入組件

圖片

• 布局容器組件

圖片

• ?? 用戶反饋組件

圖片

??? 發(fā)展路線圖

近期目標(biāo)（v0.0.3）

• 支持像素寬度切換（2px和4px）
• 完善表單組件系列：?jiǎn)芜x框、復(fù)選框、滑塊、開(kāi)關(guān)、表單容器
• 開(kāi)發(fā)圖片展示組件和圖片像素化功能
• 實(shí)現(xiàn)虛擬列表組件
• 完善測(cè)試用例覆蓋

長(zhǎng)期規(guī)劃

• 持續(xù)擴(kuò)充組件種類，滿足更多應(yīng)用場(chǎng)景
• 深度優(yōu)化組件性能表現(xiàn)
• 積極與社區(qū)互動(dòng)，收集用戶反饋，持續(xù)改進(jìn)

參與貢獻(xiàn)方式

GitHub：https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fshika-works%2Fpixelium-design

文檔：https://link.juejin.cn/?target=https%3A%2F%2Fshika-works.github.io%2Fpixelium-design