Mo UI

一个基于 Vue 3 + TypeScript + Element Plus 的现代化组件库

特性

• 🚀 基于 Vue 3.5.18 最新版本，使用 Composition API 和 <script setup> 语法糖
• 💪 使用 TypeScript 编写，提供完整的类型定义
• 🎨 现代化扁平设计风格
• 📦 基于 Element Plus 2.10.4 二次封装，API 更简洁
• 🛠️ 使用 Vite 7.0.6 构建，支持 ES 模块和 UMD 格式
• 🎯 支持按需引入和完整引入
• 📱 响应式设计，支持移动端

项目结构

mo-ui/
├── packages/           # 组件库源码
│   ├── form/          # Form 组件
│   │   ├── index.vue  # 主 Form 组件
│   │   ├── MoFormItem.vue  # 表单项包装组件
│   │   ├── types.ts   # 类型定义
│   │   └── widgets/   # 表单控件子组件
│   │       ├── InputWidget.vue
│   │       ├── SelectWidget.vue
│   │       ├── TextareaWidget.vue
│   │       ├── NumberWidget.vue
│   │       ├── SwitchWidget.vue
│   │       ├── DateWidget.vue
│   │       └── CustomWidget.vue
│   └── index.ts       # 组件库入口文件
├── dev/               # 开发环境
│   ├── App.vue        # 开发示例应用
│   └── main.ts        # 开发环境入口
├── dist/              # 构建输出
├── package.json       # 包配置
├── vite.config.ts     # Vite 配置
└── tsconfig.json      # TypeScript 配置

安装

# 使用 npm
npm install mo-ui

# 使用 yarn
yarn add mo-ui

# 使用 pnpm
pnpm add mo-ui

快速开始

完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import MoUI from 'mo-ui'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(MoUI)
app.mount('#app')

按需引入

import { MoForm } from 'mo-ui'

组件

MoLogin 登录组件

现代化、美观且带科技感的登录组件，支持多种背景效果。

基础用法

<template>
  <MoLogin 
    :config="loginConfig" 
    @login="handleLogin"
    @forgot-password="handleForgotPassword"
    @register="handleRegister"
  />
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { MoLogin } from 'mo-ui'
import type { LoginConfig, LoginFormData } from 'mo-ui'

const loginConfig = reactive<LoginConfig>({
  page: {
    title: '用户登录',
    subtitle: '欢迎回来，请登录您的账户',
    background: {
      type: 'gradient', // 'gradient' | 'particles' | 'geometric'
      primaryColor: '#667eea',
      secondaryColor: '#764ba2'
    }
  },
  form: {
    username: {
      placeholder: '请输入用户名或邮箱'
    },
    password: {
      placeholder: '请输入登录密码'
    }
  },
  onLogin: async (data: LoginFormData) => {
    console.log('登录数据:', data)
    // 处理登录逻辑
  }
})

const handleLogin = (data: LoginFormData) => {
  console.log('登录成功:', data)
}

const handleForgotPassword = () => {
  // 处理忘记密码
}

const handleRegister = () => {
  // 处理注册
}
</script>

背景效果

• gradient - 渐变背景，支持自定义颜色
• particles - 粒子动画背景，科技感十足
• geometric - 几何图形背景，现代简约

MoForm 表单组件

基于 Element Plus 的 el-form 进行二次封装，提供更简洁的配置化 API。

基础用法

<template>
  <MoForm :config="formConfig" @submit="handleSubmit" />
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { MoForm } from 'mo-ui'
import type { FormConfig } from 'mo-ui'

const formConfig = reactive<FormConfig>({
  title: '用户信息',
  description: '请填写完整的用户信息',
  model: {
    username: '',
    email: '',
    age: null
  },
  rules: {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    email: [
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ]
  },
  items: [
    {
      prop: 'username',
      label: '用户名',
      type: 'input',
      placeholder: '请输入用户名'
    },
    {
      prop: 'email',
      label: '邮箱',
      type: 'input',
      placeholder: '请输入邮箱地址'
    },
    {
      prop: 'age',
      label: '年龄',
      type: 'number',
      componentProps: {
        min: 1,
        max: 120
      }
    }
  ]
})

const handleSubmit = (data: Record<string, any>) => {
  console.log('表单数据:', data)
}
</script>

支持的表单项类型

• input - 输入框
• textarea - 文本域
• select - 选择器
• number - 数字输入框
• switch - 开关
• date - 日期选择器
• custom - 自定义组件

开发

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

# 构建库
yarn build:lib

# 类型检查
yarn type-check

许可证

MIT License