使用场景对照表

| 场景 | 推荐写法 | 示例 | |------|--------|------| | NPM 包名 | mollu-ui | npm install mollu-ui | | Vue 组件前缀 | Mollu | <MolluButton /> | | CSS 类名前缀 | ml | .ml-button { } | | CLI 工具 | ml | ml serve | | 变量/函数名 | ml | const ml = createApp() | | GitHub 仓库 | mollu-ui | github.com/you/mollu-ui | | 博客/品牌名 | Mollu 或 蜗迹 | “欢迎来到 Mollu 的蜗迹” |

域名 & 社交账号建议

| 平台 | 推荐 ID | |------|--------| | GitHub | @mollu-ui | | Twitter / X | @mollu_ui | | NPM | mollu-ui | | 域名 | mollu.dev（首选）或 mlui.dev |

简介

Mollu UI 是一个基于 Vue 3 和 TypeScript 的现代化组件库，其设计灵感来源于蜗牛的坚韧和稳健。我们相信，如同蜗牛一样，优秀的组件库应该以稳定可靠为核心，逐步前行，为开发者提供坚实的支持。

🐌 奋进的蜗牛：蜗牛虽然行动缓慢，但每一步都踏实稳健。Mollu UI 亦如此，我们不追求一时的新奇，而更注重长期的稳定和可靠性。

特性

• 🐌 稳健可靠：如同蜗牛般稳定，每个组件都经过精心设计和测试
• ⚡ 基于 Vue 3：充分利用 Vue 3 的新特性和性能优势
• 🔧 TypeScript 支持：提供完整的类型定义，提升开发体验
• 🎨 UnoCSS 驱动：轻量级样式解决方案，高度可定制
• 📱 响应式设计：支持各种设备尺寸，提供一致的用户体验
• 📦 按需引入：支持按需引入组件，减少打包体积

安装

# 使用 npm
npm install @mollu/ui

# 使用 yarn
yarn add @mollu/ui

# 使用 pnpm
pnpm add @mollu/ui

快速开始

完整引入

import { createApp } from 'vue'
import App from './App.vue'
import MolluUI from '@mollu/ui'
import '@mollu/ui/dist/style.css' // 引入样式

const app = createApp(App)

app.use(MolluUI)
app.mount('#app')

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import { MButton, MCard } from '@mollu/ui'
import '@mollu/ui/dist/style.css' // 引入样式

const app = createApp(App)

app.component('MButton', MButton)
app.component('MCard', MCard)
app.mount('#app')

文档

• 官方文档
• 组件列表
• API 规范

示例

<template>
  <div class="container">
    <m-button type="primary" @click="handleClick">点击我</m-button>
    <m-card header="卡片标题">
      <p>这是卡片内容</p>
    </m-card>
  </div>
</template>

<script setup>
import { MButton, MCard } from '@mollu/ui'

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

设计理念

Mollu UI 的设计灵感来源于"奋进的蜗牛"。蜗牛虽然行动缓慢，但每一步都踏实稳健，背负着自己的壳，稳步向前。这种精神体现在我们组件库的每一个细节中：

• 稳定性优先：每个组件都经过充分测试，确保在各种场景下的稳定性
• 渐进式发展：我们逐步完善组件库，不盲目追求数量
• 简洁易用：API 设计简洁明了，易于理解和使用
• 性能卓越：每个组件都经过性能优化，确保应用的流畅性

贡献

我们欢迎任何形式的贡献！

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

开源协议

Mollu UI 遵循 MIT License。

致谢

感谢所有为 Mollu UI 做出贡献的人们，以及 Vue.js 生态系统的优秀项目。