この記事について
vueアプリケーション開発に必要な環境設定と、作成したアプリケーションのGitHub Pagesへのデプロイの流れをできる限り丁寧にまとめました。GitHub Pagesは静的WEBサイトを無料公開できるサービスです。不明な点等ございましたら指摘していただけると助かります。
使用環境
エディション：Windows 11 Pro
バージョン：22H2
vueのインストール
用語解説
- Vue.js
- JavaScriptをベースとしたUI構築のためのプログレッシブ（先進的な）フレームワーク
- @vue/cli
- Vue.jsで開発をするためのツールCLIはもちろん、GUIも提供している
- Node.js
- サーバーサイドで動くJavascriptWindowsではインストーラによるNode.jsのインストールでnpmもインストールされる
- npm
- Node Package Managerの略Node.jsのパッケージを管理するためのもので、@vue/cliの使用に必要
1. Node.jsのインストール
Node.js公式サイトにアクセスし、インストーラをダウンロードします。特別な理由がない限り、LTS（推奨版）にするのがよいでしょう。
2. @vue/cliのインストール
続いて、Vue.jsの開発ツール@vue/cliのインストールです。
まず、コマンドプロンプトを起動します。
上のようなデスクトップの検索バーで「cmd」と入力すると、コマンドプロンプトが出てくるので開いてください。
コマンドプロンプトで以下のコマンドを実行します。
> npm install -g @vue/cli
-g により、グローバルインストールとなり、システムディレクトリにインストールされるそうです。
vueアプリケーションの作成
コマンドプロンプトで任意のパスに移動し、以下のコマンドを実行します。
> vue create プロジェクト名
なお、半角英数字と一部記号（小文字のみ）以外を使うとエラーになりますのでご注意を。
以下のように選択肢が出ます。今回は、「default (babel, eslint)」のままEnter。
※上下矢印キーで切り替えができます。
? Please pick a preset:
> default (babel, eslint)
Manually select features
完了したら、作成したプロジェクト配下に移動します。
> cd プロジェクト名
プロジェクトを起動します。
> npm run serve
ブラウザでhttp://localhost:8080/にアクセスし、以下のようなページが表示されたら、成功です！
※Ctrl+cでプロジェクトを停止することができます。
GitHubのアカウント作成
※GitHubアカウントをお持ちの方はこの章はとばして構わないです。
GitHub公式HPにアクセスしていただき、下のしるしのところでアカウントを作成することができます。
GitHub Pagesへの公開
プロジェクトのビルド
「プロジェクト名」ディレクトリで以下のコマンドを入力し、VScodeを開きます。
> code .
ディレクトリ直下のvue.config.jsファイルを以下のように編集します。
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
publicPath: process.env.NODE_ENV === 'production' ? '/product-frontend/' : '/',
outputDir: 'docs'
});
以下のコマンドでプロジェクトをビルドします。
> npm run build
プロジェクトをビルドすると、ファイル群がまとめられたdocsフォルダが生成されます。
なお、デフォルトのビルド先はdistフォルダですが、今回設定でdocsに変更してます。
GitHubでリポジトリを作成
GitHub上でレポジトリを作成します。レポジトリ名は任意（今回はtest）の名前を付けます。無料で公開したい場合はPublicにする必要があります。
「プロジェクト名」ディレクトリで以下のコマンドを入力し、プロジェクトをgit管理して、GitHub上に作成したレポジトリにpushします。
> git init
> git add -A
> git commit -m "first commit"
> git branch -M main
> git remote add origin <リモートレポジトリＵＲＬ>
> git push -u origin main
GitHub管理画面のSettingsからPagesを選びます。
branchの部分をmain、folderはdocsを選んで保存します。
https://<アカウント名>.github.io/<レポジトリ名>/に公開されます。
（反映には若干の時間を要します）
下のActionsの部分でデプロイの経過を確認することができます。
