指南组件

安装

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

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

安装Uno预设

pnpm add -D @skiyee/ui-preset
请确保你已经安装了 UnoCSS 以及相关 UniApp 对 UnoCSS 的适配插件

载入预设

unocss.config.ts
import presetSkiyeeUI from '@skiyee/ui-preset'

export default defineConfig({
  presets: [
    // ...
    presetSkiyeeUI(),
  ],
})

注册使用

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>
点颗星星 打赏项目