从 NES 到现代 Web —— 我用 Vue 3 打造了一套像素风组件库，支持自定义 Paint Worklet
猫闷台817约 3 分钟点击关注公众号，“技术干货” 及时达！
如果你也喜欢像素美术、喜欢组件化开发，欢迎点个 「Star ⭐️」 支持我一下：
👉 GitHub 地址：
https://github.com/maomentai817/pixel-ui
1️⃣ 项目初衷
红白机、GameBoy 游戏，那种块状像素 UI 总让人心驰神往。现在虽然是现代 Web 时代，但像素风 UI 的美学依然令人着迷。
现有的 8-bit 风组件库 NES.css 是一个 CSS 框架, 它只需要 CSS，不依赖于任何 JavaScript, 核心绘制逻辑都是基于 box-shadow 实现, 但在不同浏览器环境, 浏览器缩放时，box-shadow 的浮点偏移值经过缩放后无法精准对齐物理像素网格，导致渲染出现间隙。子像素定位、像素舍入误差和 box-shadow 本身不适合精细拼接渲染等原因造成了一些困扰
NES.css：
https://github.com/nostalgic-css/NES.css
于是我决定用 Vue 3 + TypeScript + UnoCSS + CSS Houdini 打造一款组件库 —— 让「像素风重回前端视野」。
项目地址👇
https://github.com/maomentai817/pixel-ui
组件库首页👇
https://maomentai817.github.io/pixel-ui/
2️⃣ 技术选型
<script setup> | |
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,如enumobjectFunction 等复杂形式,结合 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
}
插件会自动生成：
支持对
PropsSlotsEventsExpose 结构进行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 支持
项目仓库地址：
👉 https://github.com/maomentai817/pixel-ui
npm地址：
👉 https://github.com/maomentai817/pixel-ui
欢迎大家：
🌟 点个 Star 🐛 提 Issue 🤝 提 PR 📢 分享给像素控朋友！
🙏 最后
这个组件库是我对像素 UI 的一次致敬与再创造。
如果你也喜欢这种风格，欢迎来体验并提出建议，一起打磨一个属于 Web 世界的像素 UI 工具集！
关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding