Vue Amazing UI 是一个基于 Vue.js 的现代化组件库，旨在帮助开发者快速构建美观、高效的前端界面。它提供了一系列高质量的 UI 组件，适用于企业级应用、中后台系统以及移动端项目。
🌟 核心特点
丰富的组件
包含常用组件：按钮、表单、表格、弹窗、导航、卡片等。
高级功能：虚拟滚动、拖拽排序、图表集成等。
高度可定制
支持主题定制（通过 CSS 变量或 Sass），轻松适配品牌风格。
灵活的 API 设计，满足个性化需求。
响应式设计
完美适配 PC、平板和移动端，提供栅格系统和布局组件。
TypeScript 支持
完整的类型定义，提升开发体验和代码健壮性。
性能优化
按需加载、组件懒加载，减少打包体积。
📦 安装
npm install vue-amazing-ui
# 或
yarn add vue-amazing-ui
🚀 快速使用
import { createApp } from 'vue';
import VueAmazingUI from 'vue-amazing-ui';
import 'vue-amazing-ui/dist/styles.css'; // 引入样式
const app = createApp(App);
app.use(VueAmazingUI);
app.mount('#app');
🎨 主题定制
在项目的 CSS 中覆盖默认变量：
:root {
--va-primary-color: #1890ff; /* 修改主色调 */
--va-border-radius: 8px; /* 调整圆角 */
}
或通过 Sass 配置：
// 在 vite/webpack 中配置 Sass 变量
$va-primary-color: #1890ff;
@import 'vue-amazing-ui/src/styles/main.scss';
📚 文档与示例
官方文档：https://vue-amazing-ui.org/（示例链接）
GitHub 仓库：https://github.com/vue-amazing/ui
🔥 热门组件示例
智能表格（SmartTable）
支持分页、排序、自定义模板：
<va-smart-table :data="tableData" :columns="columns" />
动态表单（DynamicForm）
通过 JSON 配置生成表单：
<va-dynamic-form :schema="formSchema" @submit="handleSubmit" />
可视化图表（Chart）
集成 ECharts 或 D3：
<va-chart type="line" :options="chartOptions" />
💡 与其他库对比
特性 Vue Amazing UI Element Plus Ant Design Vue
主题定制灵活性 ✅ CSS 变量/Sass ✅ SCSS ✅ Less
按需加载 ✅ ✅ ✅
TypeScript 支持 ✅ ✅ ✅
移动端适配 ✅ 响应式 ✅ 部分组件 ✅ 响应式
❓ 常见问题
Q：支持 Vue 2 吗？
A：当前仅支持 Vue 3，如需 Vue 2 版本可查看 Legacy Branch。
Q：如何贡献代码？
A：欢迎提交 PR 或 Issue，请遵循项目的贡献指南。
🌈 生态插件
Vue Amazing Pro：基于本组件库的中后台模板（含权限管理、仪表盘等）。
Vue Amazing CLI：快速生成项目的脚手架工具。
通过 Vue Amazing UI，开发者可以专注于业务逻辑，减少重复造轮子的时间。无论是简单页面还是复杂应用，都能高效完成！ 🎉