在 uniapp 中使用

安装

pnpm add @whskyler/skyler-ui

main.ts

import { createSSRApp } from 'vue'
import App from './App.vue'
import SkylerUI from '@whskyler/skyler-ui'

export function createApp() {
  const app = createSSRApp(App)
  app.use(SkylerUI)
  return { app }
}

引入样式

在 App.vue 的全局样式中（或主入口的 SCSS 文件）：

<style lang="scss">
@use '@whskyler/skyler-ui/scss';
</style>

不需要单独 import style.css —— 这个库直接发布源码（.vue + .scss + .ts），由你 uniapp 项目的编译器在打包时处理。

发包形态：为什么是源码

mp-weixin / mp-alipay / mp-toutiao 这类小程序平台不消费 Vue 的虚拟 DOM，它们用各自的模板系统（WXML / AXML / TTML）。所以一个面向小程序的组件库不能像普通 Vue 库那样把组件预编译成 dist/index.js，那样的产物只能在 H5 跑。

业界通行做法（uview-plus、wot-design-uni、sard-uniapp）是直接发布 src/ 源码：消费方的 uniapp 编译器（Vite plugin + uni 编译器）会针对每个目标平台分别处理 .vue 源码。Skyler UI 也采用这种方式。

node_modules/@whskyler/skyler-ui/
├── src/
│   ├── components/
│   │   ├── button/
│   │   │   ├── button.vue   ← uniapp 编译器在这里编译
│   │   │   ├── types.ts
│   │   │   └── index.ts
│   │   └── ...
│   ├── styles/
│   │   ├── _vars.scss        ← rpx 设计 token
│   │   └── ...
│   └── index.ts
├── package.json
├── README.md
└── LICENSE

package.json#main 指向 ./src/index.ts，consumer 的 vite 会按 .vue 单文件组件正常处理。

单位

组件源码统一使用 rpx（小程序母语单位，750 设计稿基准），这与 uniapp 默认行为完全一致：

• 小程序：rpx 由小程序运行时按设备宽度换算（750rpx = 屏宽）。
• uniapp H5：H5 运行时把 rpx 转 px。
• 本仓库的 docs / playground（独立 Vue 3 项目）：通过一个轻量的 vite postcss 插件把 rpx 按 1rpx = 0.5px 转为 px，仅用于浏览器预览，不影响发布到 npm 的源码。

在小程序中使用 Toast 等弹层

SkyToast 是组件形式（带 v-model:show），原因是小程序 sandbox 不支持 document 动态挂载。如果你需要更接近 uni.showToast 的命令式调用，可在 App.vue 中放一个全局 <sky-toast> 后通过 Vue ref / pinia 控制。

<!-- App.vue -->
<template>
  <SkyToast v-model:show="toastStore.show" :type="toastStore.type" :message="toastStore.text" />
</template>

兼容性

平台	微信	支付宝	字节	H5
Button	✅	✅	✅	✅
Icon	✅	✅	✅	✅
Cell	✅	✅	✅	✅
Tag	✅	✅	✅	✅
Divider	✅	✅	✅	✅
Loading	✅	✅	✅	✅
Toast	✅	✅	✅	✅