更新记录

1.0.0（2026-04-02） 下载此版本

更新日志

[1.0.0] - 2026-04-02

平台兼容性

uni-app(3.7.3)

uni-app x(3.7.3)

其他

vant-ui

轻量、可定制的 uni-app x 组件库

🎯 简介

vant-ui 是专为 uni-app x 开发的移动端组件库，遵循 Vant 设计规范，提供一致的 UI 体验。组件库采用模块化设计，支持按需引入，适用于各种 uni-app 项目。

🚀 特性

• 跨平台兼容 - 支持 H5、小程序、App、快应用等多端平台
• Vant 设计 - 遵循 Vant UI 设计规范，提供熟悉的使用体验
• 高性能 - 组件经过优化，体积小，性能优异
• 易用性 - 简洁的 API 设计，上手快速
• TypeScript - 使用 UTS 编写，提供完整的类型支持
• 组合式 API - 支持 <script setup lang="uts"> 现代开发方式
• 按需引入 - 支持组件单独引入，减少包体积
• 主题定制 - 支持自定义主题样式

📦 安装

方式一：通过 HBuilderX 插件市场安装

1. 在 HBuilderX 中打开项目
2. 右键点击 uni_modules 目录
3. 选择 "从插件市场导入"
4. 搜索 "vant-ui" 并安装

方式二：手动安装

1. 下载 vant-ui 组件包
2. 将 vant-ui 目录复制到项目的 uni_modules 目录下

⚙️ 配置

在项目的 pages.json 文件中添加 easycom 配置：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^vant-(.*)": "uni_modules/vant-$1/components/vant-$1/vant-$1.uvue"
    }
  }
}

📖 使用示例

基础使用

<template>
  <!-- 使用按钮组件 -->
  <vant-button type="primary" @click="handleClick">
    主要按钮
  </vant-button>

  <!-- 使用单元格组件 -->
  <vant-cell-group title="个人信息" inset>
    <vant-cell title="用户名" value="张三" />
    <vant-cell title="手机号" value="138****1234" />
    <vant-cell title="邮箱" value="zhangsan@example.com" />
  </vant-cell-group>
</template>

<script setup lang="uts">
import { ref } from 'uts'

const handleClick = () => {
  uni.showToast({
    title: '按钮被点击',
    icon: 'none'
  })
}
</script>

<style lang="scss">
/* 样式 */
</style>

按需引入组件

vant-ui 采用模块化设计，每个组件都是独立的 uni_module，可以单独安装和使用：

# 只安装按钮组件
# 将 vant-button 目录复制到 uni_modules 目录下

# 只安装单元格组件  
# 将 vant-cell 目录复制到 uni_modules 目录下

🎨 组件列表

基础组件

• Button 按钮 - 按钮组件，支持多种样式和状态
• Cell 单元格 - 单元格组件，用于列表展示

表单组件（开发中）

• Input - 输入框组件
• Checkbox - 复选框组件
• Radio - 单选框组件
• Switch - 开关组件
• Picker - 选择器组件

反馈组件（开发中）

• Toast - 轻提示组件
• Dialog - 对话框组件
• Loading - 加载组件
• Notify - 消息通知组件

导航组件（开发中）

• Tabbar - 标签栏组件
• NavBar - 导航栏组件
• Tabs - 标签页组件
• Sidebar - 侧边栏组件

🔧 主题定制

vant-ui 支持通过 CSS 变量进行主题定制：

// 在 uni.scss 或页面样式中定义变量
:root {
  // 主色调
  --vant-primary-color: #07c160;
  --vant-success-color: #07c160;
  --vant-danger-color: #ee0a24;
  --vant-warning-color: #ff976a;

  // 文本颜色
  --vant-text-color: #323233;
  --vant-text-color-secondary: #969799;

  // 边框
  --vant-border-color: #ebedf0;
  --vant-border-radius: 8px;

  // 间距
  --vant-padding-base: 16px;
  --vant-padding-sm: 12px;
  --vant-padding-lg: 24px;
}

📱 示例项目

本项目包含完整的示例页面：

1. 首页 - /pages/index/index.uvue

   • 组件概览和导航

2. Button 示例 - /pages/feature/vant-button/index.uvue

   • 展示各种按钮样式和用法

3. Cell 示例 - /pages/feature/vant-cell/index.uvue

   • 展示单元格的各种配置

🏗️ 项目结构

vant-ui/
├── components/          # 组件目录
├── package.json        # 配置文件
├── readme.md           # 使用文档
└── changelog.md        # 更新日志

uni_modules/
├── vant-button/        # 按钮组件包
├── vant-cell/          # 单元格组件包
└── ...                # 其他组件包

📄 许可证

MIT License - 详见 LICENSE 文件

🤝 贡献

欢迎为 vant-ui 贡献代码！

1. Fork 本仓库
2. 创建功能分支 (git checkout -b feature/amazing-feature)
3. 提交更改 (git commit -m 'Add some amazing feature')
4. 推送到分支 (git push origin feature/amazing-feature)
5. 开启 Pull Request

🔗 相关链接

• 项目主页
• 更新日志
• Button 组件文档
• Cell 组件文档

📞 支持

• 提交 Issue: GitHub Issues
• 文档网站: https://vant-ui.github.io

感谢使用 vant-ui！ 🎉

如果你觉得这个项目对你有帮助，请给我们一个 ⭐️ 支持！