指南组件定制

安装

如何安装依赖项并构建应用程序

sKy
@skiyee
目前只提供 UniApp CLI 的集成方式，其他的集成方式将在不久后支持，See you soon

集成前提

以下依赖的版本确保大于或等于指定版本：

  • Vue: 3.4+
  • Vite: 5.2.8+
  • UniApp: 3.0.0-4060420250429001+
  • UnoCSS: 66.0.0+
推荐通过 Uni Helper 团队的脚手架 Create Uni 进行快速构建

构建流程

安装组件库

pnpm add @skiyee/uni-ui

安装预设

pnpm add -D @skiyee/ui-preset

载入预设

unocss.config.ts
import { presetUni } from 'uni-unocss' 
import presetSkiyeeUI from '@skiyee/ui-preset'

export default defineConfig({
  presets: [
    presetUni(),
    presetSkiyeeUI(),
  ],
})
建议采用 uni-unocss 确保该组件能够正常运行，前往了解安装
pnpm add -D unocss@66.0.0 uni-unocss

注册使用

src/pages/index.vue
<script setup lang="ts">
import SkButton from '@skiyee/uni-ui/sk-button.vue';
</script>

<template>
  <SkButton>Hello skiyee/ui</SkButton>
</template>
如果不想每次使用组件都去手动引用注册，请继续往下看

进阶用法

按需引用组件

skiyee/ui 基于 unplugin-vue-components 规范，提供了一个组件解析器 @skiyee/ui-resolver，用于按需引用组件，解决手动引用注册问题

由于 UniApp 的问题，无法直接使用常规的插件，需要使用 UniHelper 团队提供类似的解决方案 @uni-helper/vite-plugin-uni-components

安装依赖

pnpm add -D @skiyee/ui-resolver
如果未安装 引用组件 的插件可以进行这一步，若已安装继续下一步
pnpm add -D @uni-helper/vite-plugin-uni-components

添加插件

vite.config.ts
import SkResolver from '@skiyee/ui-resolver'
import Components from '@uni-helper/vite-plugin-uni-components'

export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [
        SkResolver()
      ],
    }),
  ]
})

直接使用

src/pages/index.vue
<template>
  <SkButton>Hello skiyee/ui</SkButton>
</template>

原子化引擎

为什么采用 uni-unocss 而非 unocss-applet？

这是因为 unocss-applet 为了照顾更多使用者，采取相对兼容的方式来处理各种问题，而 uni-unocss 采取更加激进的语法来使用，使其更加简便，避免为了兼容而引起的问题

以下步骤是没有安装 UnoCSS 的情况下的完整流程

安装依赖

pnpm add -D unocss@66.0.0 uni-unocss
为什么 unocss 为 v66.0.0，因为该版本是相对版本号较高并且能够在uni-app中稳定运行的

配置插件

vite.config.ts
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    // ...
    UnoCSS()
  ]
})

适配Uni

unocss.config.ts
import { presetUni } from 'uni-unocss' 

export default defineConfig({
  presets: [
    presetUni(),
  ],
})

完成配置

Copyright © sKy(skiyee) 2025-present