@ai98/vant

AI98 UniApp 移动端 UI 组件库：对照 Vant 4 的 API / 视觉规格，用 Vue 3 + UniApp 原生标签实现（view / input / button / picker-view 等）。

| 项目 | 说明 | |------|------| | 预览工程 | 仓库内 vendor/vant-uniapp | | 组件文档 | 各组件目录 README.md，或 monorepo vendor/vant-uniapp/docs/components | | 当前版本 | 0.4.0（基础 + 表单 + Layout 已齐） |

安装

npm i @ai98/vant
# 或
pnpm add @ai98/vant
# 或
yarn add @ai98/vant

Peer： vue@^3

适用于 uni-app Vue3 工程（Vite / pnpm create uni 等）。

快速接入

1. 全局样式（主题变量）

在 App.vue 中引入：

/* App.vue */
<style lang="scss">
@import '@ai98/vant/styles/index.scss';
</style>

2. easycom（推荐）

pages.json：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^van-layout$": "@ai98/vant/layout/layout.vue",
      "^van-nav-bar$": "@ai98/vant/layout/nav-bar.vue",
      "^van-(.*)$": "@ai98/vant/components/$1/$1.vue"
    }
  }
}

页面中直接使用：

<template>
  <van-layout title="首页" nav-mode="custom" :scrollable="true">
    <van-button type="primary" block @click="onOk">提交</van-button>
  </van-layout>
</template>

<script setup lang="ts">
import { showToast } from '@ai98/vant';

function onOk() {
  showToast('ok');
}
</script>

3. 手动 import

import {
  VanButton,
  VanForm,
  VanField,
  showToast,
  showSuccessToast,
  version,
} from '@ai98/vant';

4. Toast 命令式

需在页面树中有全局宿主（二选一）：

• 使用 <van-layout>（默认 toast 为 true，内部已挂载）
• 或自行放置：<van-toast global />

import {
  showToast,
  showSuccessToast,
  showFailToast,
  showLoadingToast,
  closeToast,
} from '@ai98/vant';

已包含组件

基础

Button · Cell · CellGroup · Icon · Image · Row · Col · Space · Popup · Overlay · Toast

表单

Form · Field · Search · Switch · Checkbox · CheckboxGroup · Radio · RadioGroup · Stepper · Rate · Slider · Uploader · Picker · DatePicker · TimePicker · PickerGroup · Calendar · Cascader · Area · NumberKeyboard · PasswordInput · Signature

布局壳

Layout · NavBar · useSystemInfo · px2rpx

每个组件的 Props / Events / Slots 见：

node_modules/@ai98/vant/components/<name>/README.md
node_modules/@ai98/vant/layout/README.md

设计约定

1. 原生优先：表单控件底层优先 UniApp 内置组件（性能 / 端能力）。
2. 尺寸 rpx：设计稿 375 宽下 Vant 的 1px ≈ 2rpx。
3. 不依赖 DOM：无 document / Teleport to body；Toast 用页面级宿主。

开发（monorepo）

# 仓库根目录
pnpm install

# 预览 / 改组件：在 vant-uniapp 工程内开发
cd vendor/vant-uniapp
pnpm install --ignore-workspace
pnpm dev:h5
# 或 pnpm dev:mp-weixin

# 同步到发布包
pnpm --filter @ai98/vant run sync
# 或：node scripts/sync-vant-from-uniapp.mjs

发布

# 登录（首次）
npm login

# 确认 scope 与版本后发布
pnpm release:vant
# 等价：pnpm --filter @ai98/vant publish --access public --no-git-checks

License

MIT