Shadow UI

基于 Vue 3 和 uni-app 开发的跨平台 UI 组件库，提供丰富的基础组件和统一的设计风格，支持 H5、小程序和 APP 多平台使用。

核心特性

• 跨平台兼容：支持 H5、小程序、APP 多平台
• 丰富组件：提供 30+ 常用 UI 组件
• 统一设计：统一的设计语言和视觉风格
• 易于使用：简洁的 API 设计，易于集成和扩展
• 主题定制：支持 CSS 变量和 SCSS 变量双重主题定制
• 高性能：优化的组件性能，减少渲染开销

快速开始

安装

将 shadow-ui 目录复制到您的 uni-app 项目的 uni_modules 目录下，框架会自动注册并可用。

引入使用

Vue 3 项目（使用 Composition API）

import { createApp } from 'vue'
import App from './App.vue'

// 引入全局UI
import shadowUi from '@/uni_modules/shadow-ui'

const app = createApp(App)
app.use(shadowUi)
app.mount('#app')

基础使用

<template>
  <ui-button type="primary" @click="handleClick">点击我</ui-button>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击了！');
};
</script>

组件预览

目录结构

uni_modules/shadow-ui/
├── components/        # 核心组件
├── static/           # 样式和静态资源
├── libs/             # 核心库
├── utils/            # 工具函数
└── index.js          # 框架入口

技术栈

• Vue 3
• uni-app
• SCSS

许可证

MIT License (opens new window)

演示网址

Shadow UI 演示 (opens new window)