vant-go

基于 Vant 4 的 Vue 3 + TypeScript 移动端业务组件扩展库。

组件列表

| 组件名 | 说明 | 主要 Props | |--------|------|------------| | VaxAvatar | 头像组件，基于 Vant Image 封装 | src 头像地址, size 尺寸(small/normal/large/number), round 是否圆形 | | VaxCaptcha | 验证码输入组件，支持短信/WhatsApp 双通道 | phone 手机号, captcha 验证码, whatsApp 是否启用WhatsApp, onSend 发送接口 | | VaxCard | 卡片组件，包含标题、内容、状态和行动区域 | title 标题, label 标签, value 值, status 状态, action 操作 | | VaxEmpty | 空状态组件，基于 Vant Empty 封装 | image 图片类型, imageSize 图片尺寸, description 描述文字 | | VaxField | 表单字段组件，支持文本/日期/选择器 | icon 图标, label 标签, type 类型(text/date/select), readonly 只读 | | VaxIcon | 图标组件，基于 Iconify 图标库 | icon 图标名, vendor 图标库, size 尺寸, color 颜色, background 背景色, round 圆形背景 | | VaxLoading | 加载组件，支持全屏遮罩 | type 类型, size 尺寸, color 颜色, text 文字, fullscreen 是否全屏 | | VaxNavBar | 导航栏组件，基于 Vant NavBar 封装 | leftArrow 返回箭头, leftText 左侧文字 | | VaxTabbar | 底部标签栏组件，支持路由切换 | menu 菜单配置数组, flash 是否启用闪光效果 |

安装

pnpm add vant-go vant vue

vant 与 vue 是 peer 依赖，必须由消费项目自行安装（避免重复打包与版本冲突）。

使用

A. 全量注册

import { createApp } from 'vue'
import VantGo from 'vant-go'
import 'vant-go/style.css'
import App from './App.vue'

createApp(App).use(VantGo).mount('#app')

B. 按需 + 自动导入（推荐）

配合 unplugin-vue-components 使用 VantGoResolver，模板里裸写组件即可，无需手动 import。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import { VantGoResolver } from 'vant-go/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        VantResolver(),
        VantGoResolver(),
      ],
    }),
  ],
})

<template>
  <VaxEmpty description="还没有数据" />
  <VaxLoading fullscreen text="加载中..." />
</template>

VantGoResolver 默认会自动导入 vant-go/style.css（去重处理），如要手动管理样式：

开发

pnpm install
pnpm build       # vue-tsc 类型检查 + vite 构建
pnpm pack        # 生成 tarball 用于发布前烟测

License

MIT © joming