Vantとは、Vue向けの軽量なモバイルWeb用UIコンポーネントライブラリです。80個以上のコンポーネントを提供し、Vue2とVue3の両方に対応しています。単一パッケージではなく、本体のvantに加えてvant-cli、vant-area-data、create-vant-cli-appなど複数の関連パッケージをpnpmワークスペースでまとめて管理するモノレポです。
package.jsonのscriptsを見ると、devやbuild、testはすべて`pnpm --dir ./packages/vant`経由でvant本体パッケージへ委譲されています。ビルドやサイト生成はpackages/vant-cli配下のcompilerディレクトリが担っており、compile-sfc、compile-less、compile-sass、compile-scriptなど処理ごとにファイルが分かれ、SFC・スタイル・スクリプトを個別にコンパイルします。gen-package-entryやgen-package-styleでエントリーファイルとスタイルの依存マップを自動生成し、web-types以下でエディタ向けの型情報も生成します。利用側では、READMEにある通りButtonなど必要なコンポーネントだけをimportしてapp.useで登録し、CSSは別途`vant/lib/index.css`をimportする構成です。スキャフォールドが欲しい場合はcreate-vant-cli-appがVue2・Vue3双方のテンプレート(generators/vue2、generators/vue3配下)をコピーして雛形プロジェクトを生成します。
- STEP 01
`npm i vant`を実行すると、node_modules配下にコンパイル済みのlibフォルダとindex.cssが展開されるのが確認できます。
- STEP 02
createAppでVueアプリを作り、`import { Button } from 'vant'`としてから`app.use(Button)`を書くと、テンプレート内で`<van-button>`が使えるようになります。
- STEP 03
`import 'vant/lib/index.css'`を忘れると、コンポーネントは動作しますが見た目が崩れた状態で表示されるはずです。
- STEP 04
独自のUIライブラリを作りたい場合は`npm create rsbuild@latest`やcreate-vant-cli-appでVue2・Vue3のスキャフォールドを生成すると、demo-buttonというサンプルコンポーネントとテストファイル、READMEひな形が最初から入っている構成を確認できます。
- STEP 05
モノレポ全体を開発する場合は`pnpm dev`(内部で`pnpm --dir ./packages/vant dev`を実行)で、packages/vant-cli/site配下のdesktop・mobile向けドキュメントサイトが立ち上がる想定です。
インストール後は、80個以上の中からモバイルUI部品(ボタン、ダイアログ、タブなど)を必要な分だけimportして使う開発体験が手に入ります。あわせて、独自UIライブラリを作りたい場合のCLI一式(vant-cli)と雛形生成ツール(create-vant-cli-app)、住所選択用の地域データ(vant-area-data)、テーマ互換パッケージ(vant-compat)なども同じリポジトリから利用できます。
READMEにある「90%以上のテストカバレッジ」やコンポーネント個々の動作は、今回提供された範囲にvant本体のsrcコードが含まれていないため、記述内容の裏取りはできていません。
ドキュメントサイトやプレビューQRコードは外部リンク(vant-ui.github.ioなど)に依存しており、本レビューではその中身は確認していません。
`engines.pnpm >= 10.33.2`という指定があり、古いpnpmやnpm・yarnだけでモノレポ全体を開発しようとすると想定外の挙動になる可能性があります。
create-vant-cli-appのテンプレートに含まれるdemo-buttonはあくまでサンプルコードなので、実際のvant本体コンポーネントの品質を代表するものではありません。
モバイルWeb向けにVue2またはVue3でUIを組みたい開発者にとっては、コンポーネント数とエコシステム(CLI、テーマ、地域データ、Nuxtモジュールなど)の広さから第一候補になり得るライブラリです。ビルド周辺の仕組み(vant-cliのcompilerディレクトリ構成)や利用フロー(import→CSS読み込み→app.use)はファイル構成とREADMEの記述から一貫しており、無理なく追跡できました。ただしコンポーネント本体の実装や実際のテストカバレッジは今回の資料に含まれていないため、その部分の品質判断は保留し、READMEの主張として扱うのが妥当です。