简介

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

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

特性

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

安装

# 使用 npm
npm install @euno/ui

# 使用 yarn
yarn add @euno/ui

# 使用 pnpm
pnpm add @euno/ui

快速开始

完整引入

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

const app = createApp(App)

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

按需引入

import { createApp } from 'vue'
import App from './App.vue'
import { EButton, ECard } from '@euno/ui'
import '@euno/ui/dist/style.css' // 引入样式

const app = createApp(App)

app.component('EButton', EButton)
app.component('ECard', ECard)
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 { EButton, ECard } from '@euno/ui'

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

设计理念

Euno 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

开源协议

Euno UI 遵循 MIT License。

致谢

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