怀旧像素美学、可树摇组件、深浅主题，开箱即用，类型安全
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 支持在以下环境运行：
| ECMAScript | Edge | Firefox | Chrome | Safari |
|---|
| ≥2020 | ≥88 | ≥78 | ≥87 | ≥14 |
如果您需要支持旧版本的浏览器，请自行添加 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
