Vue ↗ は、ユーザーインターフェースを構築するためのプログレッシブな JavaScript フレームワークです。Vue の中心的な考え方は段階的な導入です。既存のコードと並べて Vue アプリケーションを作りやすくなります。
このガイドでは、新しい Vue アプリケーションを作成し、Cloudflare Pages でデプロイします。Vue アプリケーションを生成するための一式そろったツールである vue-cli を使います。
create-cloudflare ↗ CLI（C3）で新しいプロジェクトをセットアップします。C3 は新しいプロジェクトディレクトリを作成し、Vue の公式セットアップツールを起動し、すぐにデプロイするかどうかを選べます。
create-cloudflare で新しい Vue プロジェクトを作成するには、次のコマンドを実行します。
npm create cloudflare@latest -- my-vue-app --framework=vue --platform=pagesyarn create cloudflare my-vue-app --framework=vue --platform=pagespnpm create cloudflare@latest my-vue-app --framework=vue --platform=pagesすべてのフレームワークガイドは、Git ↗ の基本的な理解があることを前提としています。Git を初めて使う場合は、この Git ハンドブックの要約 ↗ で、ローカルマシンへの Git のセットアップ方法を確認してください。
SSH でクローンする場合は、GitHub に対して push または pull する各コンピューターで SSH キーを生成 ↗ する必要があります。
詳細は GitHub のドキュメント ↗ と Git のドキュメント ↗ を参照してください。
repo.new ↗ にアクセスして、新しい GitHub リポジトリを作成します。作成後、新しく作ったプロジェクトディレクトリに移動します。次のコマンドをターミナルで実行して、ローカルアプリケーションを GitHub へプッシュします。
git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin maincreate-cloudflare（C3） ↗ で新しい Vue プロジェクトを作成すると、C3 はプロジェクトに必要な依存関係をすべてインストールし、CLI からデプロイするかどうかを尋ねます。デプロイするとサイトが公開され、デプロイ URL が渡されます。
サイトを Pages にデプロイするには、次の手順を実行します。
-
Cloudflare ダッシュボードで Workers & Pages ページを開きます。
Workers & Pages を開く ↗ -
Create application を選びます。
-
Pages タブを選びます。
-
Import an existing Git repository を選びます。
-
作成した新しい GitHub リポジトリを選び、Begin setup を選びます。
-
Set up builds and deployments セクションで、次の情報を入力します。
| 設定項目 | 値 |
|---|---|
| 本番ブランチ | main |
| ビルドコマンド | npm run build |
| ビルドディレクトリ | dist |
設定が終わったら、最初のデプロイを開始できます。Cloudflare Pages が vue、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイする様子が表示されます。
サイトをデプロイすると、プロジェクト専用の *.pages.dev サブドメインが割り当てられます。
Vue アプリケーションに新しいコードをコミットするたびに、Cloudflare Pages はプロジェクトを自動で再ビルドしてデプロイします。新しいプルリクエストでは プレビューデプロイ も使えるため、本番にデプロイする前に変更の見た目を確認できます。
このガイドを完了すると、Vue サイトを Cloudflare Pages にデプロイできています。ほかのフレームワークを始めるには、Framework ガイドの一覧 を参照してください。