从 NES 到现代 Web —— 我用 Vue 3 打造了一套像素风组件库，支持自定义 Paint Worklet 点击关注公众号，“技术干货” 及时达！ 如果你也喜欢像素美术、喜欢组件化开发，欢迎点个「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?? 技术选型技术栈用途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,如enumobjectFunction等复杂形式,结合vp-api-typing(基于 PxTooltip组件)实现类似 element-plus markdown-tooltip 的表现形式 interfaceButtonProps { /** * @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' importAppfrom'./App.vue' importPixelUIfrom'@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 #headerHEADER/template xxxx template #footerFOOTER/template template #append px-buttonAPPEND/px-button /template /px-card /template 6?? 项目规划与 TODO? 已完成： 支持自定义 PaintWorklet 绘制组件像素边框 + 阴影 + 渐变支持Storybook/VitePress 文档系统单元测试与 API 文档自动生成?? 规划中： 像素风深色模式自动切换更多组件支持像素白板绘制工具多语言文档支持 7?? 开源地址 & Star 支持项目仓库地址： ?? https://github.com/maomentai817/pixel-uinpm地址： ?? https://github.com/maomentai817/pixel-ui欢迎大家： ?? 点个 Star?? 提 Issue?? 提 PR?? 分享给像素控朋友！ ?? 最后这个组件库是我对像素 UI 的一次致敬与再创造。 如果你也喜欢这种风格，欢迎来体验并提出建议，一起打磨一个属于 Web 世界的像素 UI 工具集！ 关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文