🚀 クイックスタート - 5分でVantを愛する！

🎯 Vantの旅を始めよう

Vantの世界へようこそ！ここではVantのインストール方法と基本的な使い方を簡単に学べます。フロントエンドの初心者でも経験豊富な開発者でも、最適な始め方を見つけることができます。

💡 ヒント：まず2分間でドキュメント全体をスキャンしてから、最適なインストール方法を選択して実際に取り組むことをおすすめします！

📦 Vantをインストールする

🔧 方法1：npmでインストール（推奨）

これは最も一般的で推奨されるインストール方法で、ほとんどのプロジェクトに適しています：

bash

# 🎉 Vue 3プロジェクトでは、最新版のVantをインストール（推奨）
npm i vant

# 🔄 Vue 2プロジェクトでは、Vant 2をインストール（メンテナンスバージョン）
npm i vant@latest-v2

その他のパッケージマネージャー：

bash

# 🧶 yarnでインストール（高速）
yarn add vant

# 📦 pnpmでインストール（スペースを節約）
pnpm add vant

# ⚡ Bunでインストール（超高速）
bun add vant

🌟 なぜnpmインストールを選ぶのか？
✅ Tree Shakingをサポートし、パッケージサイズを自動的に最適化
✅ 完全なTypeScriptサポート
✅ すべての高度な機能を使用可能
✅ バージョン管理と更新が容易

🆕 新しいプロジェクトを作成する

完全に新しいプロジェクトを始める準備はできましたか？いくつかの最適なビルドツールをご紹介します：

🏆 Rsbuild（強く推奨）

なぜRsbuildを選ぶのか？

⚡ 超高速ビルド：Rspackベースで、Webpackより5〜10倍速い
🎯 公式サポート：Vantの作者が直接開発し、Vantに第一優先サポートを提供
🛠️ 即戦力：ゼロ設定で開発を開始可能
🔧 最新技術：最新のフロントエンド技術スタックをサポート

bash

# 🚀 Rsbuildプロジェクトを一発作成
npm create rsbuild@latest

💡 ヒント：Vueテンプレートを選択してからVantをインストールすると、すぐに開発を始めることができます！

🌟 その他の優れた選択肢

Vite：軽量で高速、開発体験が優れています
Nuxt：フルスタックフレームワーク、SSR/SSGをサポート

📚 公式サンプルプロジェクト

ゼロから始めたくないですか？私たちのサンプルプロジェクトを直接使用して、すぐに始めることができます：

プロジェクト	技術スタック	特性
🏗️ Rsbuildサンプル	Vue 3 + Vant 4 + Rsbuild	🚀 高速ビルド、公式推奨
⚡ Viteサンプル	Vue 3 + Vant 4 + Vite	🔥 ホットリロード、開発体験良好
🌐 Nuxt3サンプル	Vue 3 + Nuxt 3 + Vant 4	📱 SSRサポート、SEO対応

🎯 クイックスタート：任意のサンプルプロジェクトをgit cloneして、npm install && npm run devを実行するだけです！

🌐 方法2：CDNから導入（迅速なプロトタイプに適し）

アイデアをすばやく検証したり簡単なページを作成したいですか？CDN導入が最適な選択です！

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>🎉 私の最初のVantページ</title>
  
  <!-- 🎨 Vantのスタイルファイルを導入 -->
  <link
    rel="stylesheet"
    href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css"
  />
</head>
<body>
  <div id="app">
    <!-- 📱 ここにモバイルアプリが表示されます -->
  </div>

  <!-- 🔧 VueとVantのJSファイルを導入 -->
  <script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
  <script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>

  <script>
    // 🚀 Vueアプリを作成
    const app = Vue.createApp({
      template: `
        <div style="padding: 20px;">
          <h2>🎉 Vantを使っています！</h2>
          <van-button type="primary" @click="handleClick">
            クリックしてみてください
          </van-button>
        </div>
      `,
      methods: {
        handleClick() {
          // 📢 VantのToastコンポーネントを呼び出す
          vant.showToast('🎊 おめでとう！Vantを成功的に使用しました！');
        }
      }
    });
    
    // 🔌 Vantコンポーネントを登録
    app.use(vant);
    
    // 🖼️ 画像の遅延読み込みを使用する場合は、手動でLazyloadを登録
    app.use(vant.Lazyload);
    
    // 🎯 アプリをマウント
    app.mount('#app');
  </script>
</body>
</html>

💡 お試しください：上記のコードをHTMLファイルにコピーして、ブラウザで開くと、動作するVantアプリが表示されます！

🌐 無料CDNサービス

以下は優れた無料CDNサービスです。どれか一つを選んでください：

CDNサービス	特徴	リンク
🚀 jsDelivr	グローバルCDN、高速、安定性が良い	詳細を見る
📦 cdnjs	Cloudflare提供、世界中をカバー	詳細を見る
🔗 unpkg	npm公式CDN、リアルタイム同期	詳細を見る

⚠️ 使用ガイド

適用シナリオ：

✅ 迅速なプロトタイプ開発
✅ 学習と実験
✅ 個人の小規模プロジェクト
✅ 技術デモ

企業向けプロジェクトの推奨：

🏢 npmインストール + ビルドツールによるパッケージ化（推奨）
🏢 ファイルをダウンロードして自社のCDNにホスティング
🏢 プライベートnpmリポジトリを使用

🔒 セキュリティのヒント：本番環境では、サードパーティCDNの潜在的なリスクを回避するために、自己ホスティング方式を使用することをおすすめします。

🎯 学習サンプル

📚 公式サンプルプロジェクト

Vantを深く学びたいですか？豊富なサンプルプロジェクトをご用意しています！

🎓 何を学べるか？

学習内容	難易度	収穫
🏗️ Rsbuildによるアプリ構築	⭐⭐	最新のビルドツールをマスター
⚡ Viteによるアプリ構築	⭐⭐	高速開発を体験
🌐 Nuxtによるアプリ構築	⭐⭐⭐	SSR開発を習得
🔧 Vue CLIによるアプリ構築	⭐⭐	従来のビルド方法
📦 コンポーネントの必要に応じた導入	⭐⭐⭐	パッケージサイズの最適化
📱 Remアダプテーションの設定	⭐⭐⭐	モバイル端末のアダプテーション
🖥️ Viewportアダプテーションの設定	⭐⭐⭐	レスポンシブデザイン
🔷 TypeScriptプロジェクトの設定	⭐⭐⭐⭐	型安全な開発

🎯 学習ガイド：最も最新の方法であるRsbuildサンプルから始めることをおすすめします！

🔧 コンポーネントを導入

🌟 方法1：通常の使い方（初心者推奨）

これは最も簡単で直接的な使用方法で、迅速なスタートに適しています：

import { createApp } from 'vue';
// 🎯 1. 必要なコンポーネントを導入
import { Button } from 'vant';
// 🎨 2. コンポーネントのスタイルを導入
import 'vant/lib/index.css';

const app = createApp();

// 🔌 3. 必要なコンポーネントを登録
app.use(Button);

🎉 利点：

✅ シンプルで理解しやすい：3ステップで設定完了
✅ 自動最適化：Tree Shakingをサポートし、未使用のJSコードを自動的に削除
✅ ゼロ設定：追加のプラグイン設定は不要
✅ 安定性が高い：サードパーティプラグインに依存しない

📖 その他の登録方法： Vantは複数のコンポーネント登録方法をサポートしています：

🌍 グローバル登録
📍 ローカル登録
🔄 動的登録

💡 ヒント：JSコードは自動的に最適化されますが、CSSスタイルはすべて導入されます。プロジェクトでCSSのサイズが極端に重要な場合は、以下の方法2を検討してください。

⚡ 方法2：必要に応じてスタイルを導入（高度な最適化）

究極のパッケージサイズ最適化を求めていますか？この方法が最適です！

🎯 適用シナリオ：

📱 パッケージサイズが極端に重要なモバイルアプリ
🚀 極めて高速な読み込み速度が必要なプロジェクト
💰 トラフィックに敏感なアプリ

🔧 技術原理： unplugin-vue-componentsプラグインを使用してコンポーネントを自動的に導入し、Vant公式の@vant/auto-import-resolverリゾルバーと組み合わせることで、CSSスタイルの必要に応じた導入を実現します。

⚖️ トレードオフの考慮：

✅ 利点：CSSのサイズが小さく、読み込みが速い
❌ 欠点：設定が少し複雑で、サードパーティプラグインに依存する

💡 推奨：プロジェクトでCSSのサイズが特別重要でない場合は、より簡単な方法1を使用することをおすすめします。

🔧 ステップ1：プラグインをインストール

bash

# 📦 npmでインストール
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# 🧶 yarnでインストール
yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# 📦 pnpmでインストール
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# ⚡ bunでインストール
bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

⚙️ ステップ2：プラグインを設定

使用しているビルドツールに応じて、対応する設定方法を選択してください：

🏗️ Rsbuildプロジェクトの設定

rsbuild.config.jsファイルで設定します：

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
  plugins: [pluginVue()],
  tools: {
    rspack: {
      plugins: [
        // 🔄 VantコンポーネントのAPIを自動導入
        AutoImport({
          resolvers: [VantResolver()],
        }),
        // 🎨 Vantコンポーネントとスタイルを自動導入
        Components({
          resolvers: [VantResolver()],
        }),
      ],
    },
  },
});

⚡ Viteプロジェクトの設定

vite.config.jsファイルで設定します：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default defineConfig({
  plugins: [
    vue(),
    // 🔄 VantコンポーネントのAPIを自動導入
    AutoImport({
      resolvers: [VantResolver()],
    }),
    // 🎨 Vantコンポーネントとスタイルを自動導入
    Components({
      resolvers: [VantResolver()],
    }),
  ],
});

🔧 Webpack / Vue CLIプロジェクトの設定

webpack.config.jsまたはvue.config.jsファイルで設定します：

const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { VantResolver } = require('@vant/auto-import-resolver');

module.exports = {
  // ...その他の設定
  plugins: [
    // 🔄 VantコンポーネントのAPIを自動導入
    AutoImport({
      resolvers: [VantResolver()],
    }),
    // 🎨 Vantコンポーネントとスタイルを自動導入
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

🎯 設定の説明：
AutoImport：コンポーネントのAPI（showToast、showDialogなど）を自動導入
Components：コンポーネント自体と対応するCSSスタイルを自動導入

🎉 ステップ3：使い始める

設定が完了すると、自動導入の利便性を享受できるようになります！

vue

<template>
  <!-- ✨ 手動で導入する必要はなく、直接Vantコンポーネントを使用 -->
  <van-button type="primary" @click="showToast('success')">
    クリックしてみてください
  </van-button>
  <van-cell title="自動導入は便利ですね！" />
</template>

<script setup>
// 🎯 手動で導入する必要はなく、直接VantのAPIを使用
showToast('Hello Vant!');

// 🔥 他のAPIも使用可能
const showSuccess = () => {
  showToast({
    type: 'success',
    message: '操作成功！'
  });
};
</script>

🎊 享受できる利便性：

✅ ゼロ導入：コンポーネントとスタイルを手動でimportする必要がない
✅ インテリジェント提示：IDEが利用可能なコンポーネントを自動的に提示
✅ 必要に応じてロード：使用されているコンポーネントとスタイルのみをパッケージ化
✅ 型安全：完全なTypeScriptサポート

⚠️ 使用上の注意

🚨 重要な注意事項：

❌ 混在を避ける：「全量導入」と「必要に応じた導入」を同時に使用しないでください。コードの重複を招きます
🐛 問題報告：コンポーネント導入の問題はunplugin-vue-componentsに報告してください
🎨 スタイルの問題：スタイル関連の問題はVantのリポジトリに報告してください

🔧 バージェント互換性：

unplugin-vue-components >= 0.26.0の場合、webpack/vue-cli/rspackではComponentsPlugin.defaultを使用する必要があります
より多くの設定オプションについては、@vant/auto-import-resolverドキュメントを参照してください

🌐 フレームワークでの使用

🌟 Nuxt 3での使用

🎯 推奨方法：公式のvant-nuxtモジュールを使用して、即戦力の体験を享受しましょう！

✨ 特色機能：

🔄 コンポーネントの自動導入
🎨 必要に応じたスタイル導入
📱 関数コンポーネントのサポート
🚀 ゼロ設定での使用

📦 ステップ1：モジュールをインストール

bash

# 📦 npmでインストール
npm i @vant/nuxt -D

# 🧶 yarnでインストール
yarn add @vant/nuxt -D

# 📦 pnpmでインストール
pnpm add @vant/nuxt -D

# ⚡ bunでインストール
bun add @vant/nuxt -D

⚙️ ステップ2：モジュールを設定

nuxt.config.jsファイルにモジュールを追加します：

export default defineNuxtConfig({
  // 🔌 Vant Nuxtモジュールを追加
  modules: ['@vant/nuxt'],
  
  // 🎨 オプション：カスタム設定
  vant: {
    /** Vantの設定オプション */
  }
});

🎉 ステップ3：使い始める

設定が完了すると、直接Vantコンポーネントを使用することができます！

vue

<template>
  <div>
    <!-- 🎯 標準的な記述方法 -->
    <van-button type="primary" @click="showToast('toast')">
      通知を表示
    </van-button>
    
    <!-- 🔤 PascalCase記法 -->
    <VanButton type="success" @click="showNotify('notify')">
      通知を表示
    </VanButton>
    
    <!-- ⚡ 遅延読み込み記法 -->
    <LazyVanButton type="default">
      遅延読み込みボタン
    </LazyVanButton>
  </div>
</template>

<script setup>
// 🎯 APIを直接使用、導入不要
const handleClick = () => {
  showToast({
    type: 'success',
    message: 'Nuxt + Vantは最高です！'
  });
};
</script>

📚 詳細を知る：コンポーネントの詳細な使い方については、Nuxtコンポーネントドキュメントを参照してください。

🔄 移行ガイド

babel-plugin-importからの移行

🎉 嬉しいお知らせ：Vant 4.0+ではもはやbabel-plugin-importは不要です！

プロジェクトでまだ使用している場合は、すぐに削除してください：

diff

// babel.config.js
module.exports = {
  plugins: [
-    ['import', {
-      libraryName: 'vant',
-      libraryDirectory: 'es',
-      style: true
-    }, 'vant']
  ]
};

🚀 削除後のメリット

メリット	説明
⚡ コンパイルが速い	esbuild、swcなどの最新のコンパイルツールを使用可能
🔓 より柔軟な導入	ユーティリティ関数、型定義などを導入可能
🛠️ 設定が簡単	babelの設定の複雑さを軽減
🔧 互換性が良い	より多くのビルドツールとフレームワークをサポート

💡 これからはこのように導入できます：

// 🎯 コンポーネントを導入
import { Button, Cell } from 'vant';

// 🔧 API関数を導入
import { showToast, showDialog } from 'vant';

// 📝 型定義を導入（TypeScript）
import type { ButtonType, CellProps } from 'vant';

🎯 移行のヒント：

✅ プラグインを削除した後も、既存のコードは変更する必要がありません
✅ 方法1（通常の使い方）または方法2（必要に応じた導入）を使用することを推奨
✅ より速いコンパイル速度とより柔軟な導入方法を享受しましょう

📚 関連コンテンツ