@a2simcode/ui

SimCode UI

✨ 特性

• 🚀 现代化技术栈: 基于 Vue 3 + TypeScript + Vite
• 📦 开箱即用: 提供完善的类型定义和文档
• 🎨 精美设计: 现代化的设计风格
• 🔧 易于定制: 支持主题定制
• ⚡️ 按需加载: 支持 Tree Shaking
• 🧪 完善测试: 单元测试覆盖

📦 安装

使用 pnpm:

pnpm add @a2simcode/ui

使用 npm:

npm install @a2simcode/ui

使用 yarn:

yarn add @a2simcode/ui

安装 Peer Dependencies

@a2simcode/ui 使用 peer dependencies 来避免重复打包依赖。必须安装以下依赖：

pnpm add vue element-plus

根据你使用的组件，可能还需要安装以下可选依赖：

# 如果使用表格组件
pnpm add @visactor/vtable @visactor/vtable-editors

# 如果使用图表组件
pnpm add echarts

# 如果使用代码编辑器组件
pnpm add codemirror @codemirror/autocomplete @codemirror/commands @codemirror/lang-javascript @codemirror/lang-json @codemirror/lang-sql @codemirror/lang-python @codemirror/lang-java @codemirror/lang-css @codemirror/lang-html @codemirror/lang-xml @codemirror/lang-markdown @codemirror/language @codemirror/state @codemirror/view

# 如果使用其他功能组件
pnpm add @iconify/vue @vueuse/core dayjs async-validator crypto-js sortablejs sql-formatter countup.js @bwip-js/browser quill diagram-js diagram-js-direct-editing min-dom inherits tiny-svg min-dash

注意: 由于 @a2simcode/ui 输出的是预打包的单文件，使用方的打包器可能无法自动识别 peer dependencies。请确保在使用相关组件前，已安装对应的 peer dependencies。

🔨 快速开始

完整引入

import { createApp } from 'vue'
import App from './App.vue'
import SimCodeUI from '@a2simcode/ui'
import '@a2simcode/ui/dist/style.css'

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

按需引入

<template>
  <j-button type="primary">按钮</j-button>
</template>

<script setup lang="ts">
import { JButton } from '@a2simcode/ui'
import '@a2simcode/ui/dist/style.css'
</script>

🎯 组件列表

• ✅ Button 按钮
• ✅ Input 输入框
• ✅ Radio 单选框
• 🚧 更多组件开发中...

💻 本地开发

# 进入项目目录
cd simcode-ui

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build

# 运行测试
pnpm test

# 启动文档站点
pnpm docs:dev

📁 项目结构

simcode-ui/
├── packages/              # 组件源码
│   ├── components/        # 组件
│   │   ├── button/       # 按钮组件
│   │   ├── input/        # 输入框组件
│   │   └── index.ts      # 组件入口
│   └── theme/            # 主题样式
│       └── src/          # 样式源码 (Less)
├── examples/             # 组件预览
│   ├── App.vue          # 预览应用
│   └── main.ts          # 入口文件
├── docs/                # 文档
│   ├── .vitepress/      # VitePress 配置
│   ├── guide/           # 指南
│   └── components/      # 组件文档
├── __tests__/           # 测试文件
├── vite.config.ts       # Vite 配置
├── vitest.config.ts     # Vitest 配置
└── package.json         # 项目配置

🤝 贡献

欢迎提交 Issue 和 Pull Request!

📄 版权声明

Copyright © 2024 苏州极简搭信息技术有限公司. All rights reserved.

本软件及其相关文档为专有软件,受版权法保护。未经版权所有者明确书面许可,不得以任何形式或方式(电子、机械、复印、录制或其他方式)复制、分发、传播或使用本软件的任何部分。

🙏 致谢

感谢所有为这个项目做出贡献的开发者!