Vue

Vue ↗ はユーザーインターフェースを構築するための進歩的なJavaScriptフレームワークです。Vueのコア原則は段階的な採用であり、これにより既存のコードと共存するVueアプリケーションを簡単に構築できます。

このガイドでは、新しいVueアプリケーションを作成し、Cloudflare Pagesを使用してデプロイします。新しいVueアプリケーションを生成するためのバッテリー内蔵ツールであるvue-cliを使用します。

新しいプロジェクトの設定

create-cloudflare ↗ CLI (C3)を使用して新しいプロジェクトを設定します。C3は新しいプロジェクトディレクトリを作成し、Vueの公式セットアップツールを開始し、即座にデプロイするオプションを提供します。

create-cloudflareを使用して新しいVueプロジェクトを作成するには、次のコマンドを実行します：

npm

npm create cloudflare@latest -- my-vue-app --framework=vue

yarn

yarn create cloudflare@latest my-vue-app --framework=vue

pnpm

pnpm create cloudflare@latest my-vue-app --framework=vue

Before you continue

All of the framework guides assume you already have a fundamental understanding of Git ↗. If you are new to Git, refer to this summarized Git handbook ↗ on how to set up Git on your local machine.

If you clone with SSH, you must generate SSH keys ↗ on each computer you use to push or pull from GitHub.

Refer to the GitHub documentation ↗ and Git documentation ↗ for more information.

Create a GitHub repository

Create a new GitHub repository by visiting repo.new ↗. After creating a new repository, go to your newly created project directory to prepare and push your local application to GitHub by running the following commands in your terminal:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

Cloudflare Pagesでデプロイ

Deploy via the create-cloudflare CLI (C3)

If you use create-cloudflare(C3) ↗ to create your new Vue project, C3 will install all dependencies needed for your project and prompt you to deploy your project via the CLI. If you deploy, your site will be live and you will be provided with a deployment URL.

Cloudflareダッシュボード経由でデプロイ

1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
2. アカウントホームで、Workers & Pages > Create application > Pages > Connect to Gitを選択します。
3. 作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで次の情報を提供します：

Configuration option	Value
Production branch	main
Build command	npm run build
Build directory	dist

サイトの設定が完了したら、最初のデプロイを開始できます。Cloudflare Pagesがvue、プロジェクトの依存関係をインストールし、サイトをビルドしてからデプロイするのを見ることができるはずです。

ノート

Cloudflare Pagesに最初のサイトをデプロイするための完全なガイドについては、Get started guideを参照してください。

サイトをデプロイした後、プロジェクトのためのユニークなサブドメインが*.pages.devで提供されます。 Vueアプリケーションに新しいコードをコミットするたびに、Cloudflare Pagesは自動的にプロジェクトを再ビルドし、デプロイします。また、新しいプルリクエストに対してプレビューのデプロイメントにアクセスできるため、変更が本番環境にデプロイされる前にサイトにどのように表示されるかをプレビューできます。

Learn more

By completing this guide, you have successfully deployed your Vue site to Cloudflare Pages. To get started with other frameworks, refer to the list of Framework guides.