怀旧像素美学、可树摇组件、深浅主题，开箱即用，类型安全

Pixelium Design是一款专为Vue 3设计的像素风格UI组件库。我们从经典像素游戏的视觉美学中获取创作灵感，致力于将复古的像素艺术融入现代Web应用界面。该项目旨在为开发者提供一套可复用、高性能的像素风格组件，帮助大家在项目中轻松构建独具特色的视觉体验。

技术栈

• Vue 3 ‑ 支持 Composition API 等全部现代特性
• TypeScript ‑ 基于 TS 类型系统，开箱即用的类型安全 
• Vite ‑ 极速冷启动 + 热更新 ，生产环境基于 Rollup 构建 
• oxlint ‑用 Rust 编写的超快 Lint 工具，保障代码质量与一致性 

功能特性

• 像素美学 ‑ 复古像素外观 ，可自定义分辨率与调色 
• OKlab 调色板 ‑ 基于 OKlab 色彩模型的主题生成器 ，一键生成自定义调色板 
• 树摇优化 ‑ 每个组件独立导出 ，未使用代码自动剔除 
• 暗黑模式 ‑ 支持暗黑模式，可跟随系统或手动切换 

安装

选择一个你喜欢的包管理器。

npm install @pixelium/web-vue

兼容性

Pixelium Design 支持在以下环境运行：

如果您需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill。

完整导入

如果你不在意包大小，或者你会用到几乎所有的组件，我们推荐使用完整导入。

import { createApp } from 'vue'
import App from './App.vue'
import Pixelium from '@pixelium/web-vue'
import '@pixelium/web-vue/dist/pixelium-vue.css'
// Import the font
import '@pixelium/web-vue/dist/font.css'

createApp(App)
  .use(Pixelium)
  .mount('#app')

按需导入

Pixelium Design 支持基于 ESModule 的 Tree Shaking，你可以直接从 @pixelium/web-vue/es 直接进行按需导入。

样式文件也会被自动导入，请确保你的构建工具支持在 JS 文件中导入样式。

• Vite：默认支持；
• Webpack：通常需要借助 css-loader 和 style-loader；
• Rollup：通常需要借助 rollup-plugin-postcss 和 postcss；
• 其他构建工具请参考它们的文档。

请确保项目 Typescript 在 4.7 版本以上，避免类型解析异常。

// Import the font at the project entry
import '@pixelium/web-vue/dist/font.css'

// Use components in the business code by on-demand import
import { Button, Link } from '@pixelium/web-vue/es'

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4751