使用 Vant CLI 搭建 UI 组件库：从 H5 到小程序跨网站

目录

一、Vant CLI 简介

Vant CLI 是 Vant 官方提供的组件库开发工具。主要能力包括：

• 项目脚手架约定式目录结构，自动发现组件。
• 文档站点基于 README.md + demo/index.vue 自动生成文档站点。
• 开发服务vant-cli dev 启动文档预览。
• 代码规范内置 ESLint + Prettier 配置。
• 建立打包vant-cli build 输出 /es///lib/ 两种模块格式。

二、项目一：Axi-UI — Vue 移动端组件库

项目定位 & 痛点 🎯

Axi-UI 采用标准 Vue 单文件组件（.vue) 开发，解决了「同一套代码只能跑 H5」的误区。通过约定式目录结构，让组件自动被 Vant CLI 识别。无需手动维护入口文件，

搭建步骤详解

说到第一步先，环境准备 🚀

# 确保 Node.js>= 14
node -v
npm -v
# 推荐使用 pnpm，提高依赖安装速度
pnpm -v

再看接下来，创建项目并安装依赖 📦

# 创建目录
mkdir Axi-UI && cd Axi-UI
# 初始化 npm 项目
npm init -y
# 安装主要依赖
pnpm add -D @vant/cli @vant/eslint-config eslint prettier vue sass
# 如有需要，可单独安装 vant-cli
pnpm add -D @vant/cli

：配置 package.json

{
再看"name"，"Axi-UI","version": "0.1.0","main": "lib/Axi-UI.js","module": "es/index.js","style": "lib/index.css","typings": "lib/index.d.ts","files":,"scripts": {
"dev"的观点是，"vant-cli dev","lint": "vant-cli lint","build": "vant-cli build","build:site": "vant-cli build-site"
},"peerDependencies": {
说到"vue"，"^3.0.0"
},"devDependencies": {
"@vant/cli": "^7.0.0","@vant/eslint-config": "^7.0.0","vue": "^3.4.0","sass": "^1.77.0"
},"nano-staged": {
"*.md"的观点是。"prettier --write","*.{ts,tsx,js,vue,less,scss}":
},"eslintConfig": {
说到"root"，true,"extends":
},"prettier": {
"singleQuote": true
},"browserslist":
}

从第四步来看，创建 vant.config.mjs

从第五步来看，目录结构 & 文件骨架 📁

Axi-UI/
├── vant.config.mjs # Vant CLI 配置
├── package.json # 项目配置
├── docs/
│ ├── home.md # 项目介绍页
│ └── quickstart.md # 快速上手教程
├── src/
│ └── demo-button/
│ ├── index.vue # ✅ 主要实现
│ ├── README.md # 📖 文档内容
│ ├── demo/
│ │ └── index.vue # 演示页面
│ └── test/
│ └── index.spec.js # 单元测试示例
├── es/ # 建立产物 ES Module
└── lib/ # 建立产物 CommonJS

主要组件实现（)：

演示页面（)：

第六步的观点是。启动本地预览 🖥️

# 开发模式下实时预览文档站点
npm run dev
# 打开浏览器访问 http://localhost:/
# 修改源码后页面会自动热更新，极大提高调试效率。

最终目录结构回顾 📂

Axi-UI/
├─ .eslintignore
├─ .gitignore
├─ .husky/
│ ├─ commit-msg
│ └─ pre‑commit
├─ docs/
│ ├─ home.md
│ └─ quickstart.md
├─ src/
│ └─ demo-button/
│ ├─ index.vue
│ ├─ README.md
│ ├─ demo/
│ │ └─ index.vue
│ └─ test/
│ └─ index.spec.js
├─ es/ # ES Module 输出目录
├─ lib/ # CommonJS 输出目录
└─ site-dist/ # 文档站点静态资源

技术栈概览 🛠️

...