Maz UI

适用于 Vue 3 & Nuxt 3 的轻量高效库

文档 · 开始使用 · 展示

_{使用 Maz UI 组件构建的仪表板示例}

✨ 功能特性

• 🎯 精选组件 - 只使用你需要的部分
• 🌙 深色模式 - 内置深色模式支持
• 🎨 可主题化 - 易于使用 CSS 变量自定义
• 📱 响应式 - 移动优先的设计方法
• 🔧 TypeScript - 包含完整的类型支持
• ⚡️ 轻量级 - 可摇树优化，无冗余代码
• 🔍 SSR - 支持服务端渲染

🚀 快速开始

npm install maz-ui

Vue 3

// main.ts
import 'maz-ui/styles'

💡 用法

然后，仅导入和使用您需要的组件、组合式函数等

<template>
  <MazBtn>Click me!</MazBtn>
</template>

<script setup lang="ts">
  import MazBtn from 'maz-ui/components/MazBtn'
</script>

使用提供的解析器来享受自动导入和 TypeScript 支持：解析器文档

Nuxt 3

Nuxt 模块会自动

• 按需导入所有组件、插件、组合式函数和指令（自动导入）
• 包含所需的样式
• 开箱即用地提供 TypeScript 支持

在文档中查看选项和更多信息

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['maz-ui/nuxt'],
})

💡 用法

无需导入组件、插件、组合式函数或指令，它们都是自动导入的。

<template>
  <MazBtn @click="toast.success('Hello Maz UI!')"> Click me! </MazBtn>
</template>

<script setup lang="ts">
  const toast = useToast()
</script>

🎨 主题化变得简单

使用我们专门的 CLI 工具自定义 Maz UI 以匹配您的品牌

# Install the CLI
npm install -g @mazui/cli

# Generate your theme
maz generate-css-vars

CLI 将会自动

• 生成所有颜色变体
• 创建深色模式变量
• 输出可直接使用的 CSS 文件

要了解如何配置 CLI，请查看我们文档中的主题选项。

🧰 包含哪些内容？

• 🧩 组件 - 美观、易于访问的 UI 组件
• 🔌 插件 - 用于常见用例的强大插件
• 🎣 组合式函数 - 可重用的组合函数
• 📏 指令 - 有用的 Vue 指令
• 🛠️ 助手函数 - 用于常见任务的实用工具

🤝 贡献

我们一直在寻找贡献者！查看我们的贡献指南以开始。

📄 许可证

MIT