🎮 从 NES 到现代 Web —— 我用 Vue 3 打造了一套像素风组件库，支持自定义 Paint Worklet
如果你也喜欢像素美术、喜欢组件化开发，欢迎点个 Star ⭐️ 支持我一下：
1️⃣ 项目初衷
红白机、GameBoy 游戏，那种块状像素 UI 总让人心驰神往。现在虽然是现代 Web 时代，但像素风 UI 的美学依然令人着迷。
现有的 8-bit 风组件库 NES.css 是一个 CSS 框架, 它只需要 CSS，不依赖于任何 JavaScript, 核心绘制逻辑都是基于 box-shadow 实现, 但在不同浏览器环境, 浏览器缩放时，box-shadow 的浮点偏移值经过缩放后无法精准对齐物理像素网格，导致渲染出现间隙。子像素定位、像素舍入误差和 box-shadow 本身不适合精细拼接渲染等原因造成了一些困扰
于是我决定用 Vue 3 + TypeScript + UnoCSS + CSS Houdini 打造一款组件库 —— 让像素风重回前端视野。
项目地址👇
📦 github.com/maomentai81…
组件库首页👇
📎 maomentai817.github.io/pixel-ui/
2️⃣ 技术选型
| 技术栈 | 用途 |
|---|---|
Vue 3 + <script setup> | 组件化开发核心 |
| TypeScript | 类型系统增强开发体验 |
| UnoCSS | 原子化 CSS，灵活配置样式类 |
| CSS Houdini | 自定义 Paint Worklet 渲染像素边框 |
| Storybook + VitePress | 组件展示 + 文档系统 |
| Vitest | 测试组件逻辑与渲染 |
| pnpm + Monorepo | 高效构建与多包管理 |
3️⃣ 项目亮点
✅ 像素风自定义组件
内置组件包括：
PxButtonPxCardPxCollapsePxAnimationFramePxProgress等
支持：
- 像素边框、像素阴影、圆角控制
- 样式属性通过 @property 属性动态控制
- 支持
plain,disabled,color等状态 - 支持颜色主题自动计算
✅ 像素风字体内置
- 内置 8bit 像素字体
- 保证整体复古 UI 一致性
✅ Paint Worklet 动态渲染边框
使用 CSS Houdini 的 paint(pixel-box) 绘制像素边框：
// 自定义边框渲染逻辑
registerPaint('pixel-box', class {
paint(ctx, size, props) {
// 基于变量渲染像素感边框
}
})
通过变量如 --px-border-radius, --px-border-size, --px-shadow-depth 实现丰富的视觉效果。
✅ 动态 GIF 动画组件
通过 PxAnimationFrame 组件播放 GIF 图动画：
- 支持帧控制、阶段切换
- 拖拽交互支持
- 基于 super-gif 控制 canvas 区域
✅ Markdown API 自动生成
我们为组件文档开发了 api-table 插件：
通过读取 types.ts 文件内 jsDoc 注释信息, 自动渲染为 md-table, 如 enum object Function 等复杂形式, 结合 vp-api-typing(基于 PxTooltip组件) 实现类似 element-plus markdown-tooltip 的表现形式
interface ButtonProps {
/**
* @property type
* @type enum - primary | success | warning | danger | base
* @description 按钮类型
* @default base
*/
type?: ButtonType
/**
* @property plain
* @type { boolean }
* @description 是否为朴素按钮
* @default false
*/
plain?: boolean
}
插件会自动生成：
支持对
Props Slots Events Expose 结构进行ast解析
4️⃣ 效果预览
🖼 预览图：
5️⃣ 快速上手
安装组件库：
pnpm add -D @mmt817/pixel-ui
使用方式：
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import PixelUI from '@mmt817/pixel-ui'
import '@mmt817/pixel-ui/dist/style.css'
createApp(App).use(PixelUI).mount('#app')
组件使用示例：
<template>
<px-card>
<template #prepend>
<px-icon icon="face-thinking-solid" size="30"></px-icon>
</template>
<template #header>HEADER</template>
xxxx
<template #footer>FOOTER</template>
<template #append>
<px-button>APPEND</px-button>
</template>
</px-card>
</template>
6️⃣ 项目规划与 TODO
✅ 已完成：
- 支持自定义 PaintWorklet 绘制组件
- 像素边框 + 阴影 + 渐变支持
- Storybook/VitePress 文档系统
- 单元测试与 API 文档自动生成
📌 规划中：
- 像素风深色模式自动切换
- 更多组件支持
- 像素白板绘制工具
- 多语言文档支持
7️⃣ 开源地址 & Star 支持
项目仓库地址：
npm地址：
欢迎大家：
- 🌟 点个 Star
- 🐛 提 Issue
- 🤝 提 PR
- 📢 分享给像素控朋友！
🙏 最后
这个组件库是我对像素 UI 的一次致敬与再创造。
如果你也喜欢这种风格，欢迎来体验并提出建议，一起打磨一个属于 Web 世界的像素 UI 工具集！
喜欢的话不妨点个赞👍 + 收藏🔖
关注我，后续我还会继续分享更多组件开发 & CSS Houdini 实战经验！
