Mimesis UI

Mimesis UI 是一个基于 Vue 3 和 TypeScript 的现代化 UI 组件库，专注于提供简洁、美观且易用的界面组件。本库特别支持新拟态(Neomorphism)设计风格，为您的应用带来独特的视觉体验。

特性

• 🚀 基于 Vue 3 和 TypeScript 构建
• 🎨 支持新拟态设计风格
• 💅 丰富的组件和样式选项
• 🔧 灵活的配置和扩展能力
• 📱 响应式设计
• 📦 按需加载

安装

# 使用 npm
npm install @comfort/mimesis-ui

# 使用 yarn
yarn add @comfort/mimesis-ui

快速开始

全局引入

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import MimesisUI from '@comfort/mimesis-ui'
import '@comfort/mimesis-ui/dist/mimesis-ui.css'

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

按需引入

// 引入单个组件
import { Button, Input } from '@comfort/mimesis-ui'
import '@comfort/mimesis-ui/dist/mimesis-ui.css'

// 注册组件
app.component('MButton', Button)
app.component('MInput', Input)

组件文档

Button 按钮

按钮组件支持多种类型、尺寸和形状。

基本用法

<template>
  <div>
    <Button type="default">默认按钮</Button>
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>
    <Button type="warning">警告按钮</Button>
    <Button type="error">错误按钮</Button>
    <Button type="neomorphic">新拟态按钮</Button>
  </div>
</template>

按钮属性

| 属性名 | 说明 | 类型 | 默认值 | |----------|--------------------------|-------------------------------------------|-----------| | type | 按钮类型 | 'default'/'primary'/'success'/'warning'/'error'/'neomorphic' | 'default' | | size | 按钮尺寸 | 'small'/'medium'/'large' | 'medium' | | rounded | 是否圆角 | boolean | true | | round | 是否圆形 | boolean | false | | capsule | 是否胶囊状 | boolean | false | | block | 是否块级元素 | boolean | false | | disabled | 是否禁用 | boolean | false |

Input 输入框

输入框组件支持多种类型和样式，包含标题功能和聚焦动画。

基本用法

<template>
  <div>
    <Input
      type="text"
      v-model="inputValue"
      placeholder="请输入用户名"
      title="用户名"
    />
    <Input
      type="password"
      v-model="passwordValue"
      placeholder="请输入密码"
      title="密码"
    />
    <Input
      type="text"
      placeholder="禁用状态"
      disabled
      title="禁用输入框"
    />
  </div>
</template>

输入框属性

| 属性名 | 说明 | 类型 | 默认值 | |------------|--------------------------|---------------------|-----------| | type | 输入框类型 | string | 'text' | | v-model | 绑定值 | string/number | '' | | placeholder| 占位文本 | string | '' | | size | 输入框尺寸 | 'small'/'medium'/'large' | 'medium' | | rounded | 是否圆角 | boolean | true | | disabled | 是否禁用 | boolean | false | | title | 标题文本 | string | '' |

其他组件

更多组件文档正在完善中，敬请期待...

开发指南

环境准备

# 克隆仓库
git clone https://github.com/your-username/mimesis-ui.git

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

项目结构

mimesis-ui/
├── .gitignore
├── .vscode/
├── README.md
├── dist/
├── index.html
├── package.json
├── packages/
│   ├── Button/
│   ├── Card/
│   ├── Input/
│   ├── Table/
│   └── index.ts
├── public/
├── src/
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── yarn.lock

贡献

欢迎各位开发者贡献代码、提出建议或报告问题。请先阅读 贡献指南。

许可证

本项目采用 MIT 许可证。