✨ 特性

• 🎯 基于 Vue 3 - 使用 Vue 3 Composition API，性能更优
• 📦 组件丰富 - 提供常用 UI 组件，覆盖大部分业务场景
• 🎨 主题定制 - 支持灵活的样式配置，满足个性化需求

📦 安装

使用 npm

npm install @zmz-design/vue3-web --save

使用 yarn

yarn add @zmz-design/vue3-web

使用 pnpm

pnpm add @zmz-design/vue3-web

🚀 快速入门

完整引入

import { createApp } from 'vue'
import App from './App.vue'

// 引入组件库
import ZMZVUE3 from '@zmz-design/vue3-web'
// 引入样式
import '@zmz-design/vue3-web/style.css'

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

按需引入

import { ZmzButton, ZmzInput } from '@zmz-design/vue3-web'
import '@zmz-design/vue3-web/style.css'

export default {
  components: {
    ZmzButton,
    ZmzInput
  }
}

自动导入

推荐使用 unplugin-vue-components 插件实现自动按需导入：

npm install unplugin-vue-components -D

// vite.config.js
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Components({
      resolvers: [
        (componentName) => {
          if (componentName.startsWith('Zmz')) {
            return {
              name: componentName,
              from: '@zmz-design/vue3-web',
              sideEffects: '@zmz-design/vue3-web/style.css'
            }
          }
        }
      ]
    })
  ]
}

📖 示例

<template>
  <zmz-button type="primary" @click="handleClick">
    点击我
  </zmz-button>
</template>

<script setup>
import { ZmzButton } from '@zmz-design/vue3-web'

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

🤝 联系与交流

• QQ 群：581764678（加群请备注 zmz-vue3-web）
• 作者：zmz
• 项目地址：Gitee | GitHub | GitCode

🌟 贡献指南

我们非常欢迎您的贡献！您可以通过以下方式参与：

1. 🐞 提交 Issue 反馈问题或建议
2. 📝 提交 Pull Request 修复 Bug 或新增功能
3. 📚 完善文档，帮助更多开发者

本地开发

# 克隆项目
git clone https://gitee.com/zmz-design/zmz-vue3-web.git

# 安装依赖
pnpm install

# 启动开发服务
pnpm dev

# 构建组件库
pnpm build

# 运行测试
pnpm test

📄 开源协议

本项目基于 MIT 协议开源，欢迎 Star ⭐ 和 Fork