vueアプリケーションをインストールからGitHub Pagesに公開まで

# この記事について
vueアプリケーション開発に必要な環境設定と、作成したアプリケーションのGitHub Pagesへのデプロイの流れをできる限り丁寧にまとめました。GitHub Pagesは静的WEBサイトを無料公開できるサービスです。不明な点等ございましたら指摘していただけると助かります。
# 使用環境
エディション：Windows 11 Pro
バージョン：22H2
# vueのインストール
## 用語解説
<dl>
  <dt>Vue.js</dt>
  <dd>JavaScriptをベースとしたUI構築のためのプログレッシブ（先進的な）フレームワーク</dd>
  <dt>@vue/cli</dt>
  <dd>Vue.jsで開発をするためのツールCLIはもちろん、GUIも提供している</dd>
  <dt>Node.js</dt>
  <dd>サーバーサイドで動くJavascriptWindowsではインストーラによるNode.jsのインストールでnpmもインストールされる</dd>
  <dt>npm</dt>
  <dd>Node Package Managerの略Node.jsのパッケージを管理するためのもので、@vue/cliの使用に必要</dd>
</dl>

## 1. Node.jsのインストール
[Node.js公式サイト](https://nodejs.org/ja)にアクセスし、インストーラをダウンロードします。特別な理由がない限り、LTS（推奨版）にするのがよいでしょう。
## 2. @vue/cliのインストール
続いて、Vue.jsの開発ツール@vue/cliのインストールです。
まず、コマンドプロンプトを起動します。
![スクリーンショット 2023-08-31 140156.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/ef017d1b-b2cb-1040-7086-5d023488c904.png)
上のようなデスクトップの検索バーで「cmd」と入力すると、コマンドプロンプトが出てくるので開いてください。

コマンドプロンプトで以下のコマンドを実行します。
```cmd:cmd
> npm install -g @vue/cli
```

-g により、グローバルインストールとなり、システムディレクトリにインストールされるそうです。


# vueアプリケーションの作成
コマンドプロンプトで任意のパスに移動し、以下のコマンドを実行します。
```cmd:cmd
> vue create プロジェクト名
```
なお、半角英数字と一部記号（小文字のみ）以外を使うとエラーになりますのでご注意を。

以下のように選択肢が出ます。今回は、「default (babel, eslint)」のままEnter。
※上下矢印キーで切り替えができます。
```cmd:cmd
? Please pick a preset:
> default (babel, eslint)
  Manually select features 
```
完了したら、作成したプロジェクト配下に移動します。
```cmd:cmd
> cd  プロジェクト名
```
プロジェクトを起動します。
```cmd:cmd
> npm run serve
```
ブラウザで[http://localhost:8080/](http://localhost:8080/)にアクセスし、以下のようなページが表示されたら、成功です！
※Ctrl+cでプロジェクトを停止することができます。

# GitHubのアカウント作成
※GitHubアカウントをお持ちの方はこの章はとばして構わないです。
[GitHub公式HP](https://github.com/)にアクセスしていただき、下のしるしのところでアカウントを作成することができます。![スクリーンショット 2023-08-31 144532.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/38b52da2-55f9-548d-ab04-26964b4d8d8d.png)


# GitHub Pagesへの公開
## プロジェクトのビルド
「プロジェクト名」ディレクトリで以下のコマンドを入力し、VScodeを開きます。
```cmd:cmd
> code .
```
ディレクトリ直下のvue.config.jsファイルを以下のように編集します。
```js:vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production' ? '/product-frontend/' : '/',
  outputDir: 'docs'
});
```
以下のコマンドでプロジェクトをビルドします。
```cmd:cmd
> npm run build
```
プロジェクトをビルドすると、ファイル群がまとめられたdocsフォルダが生成されます。
なお、デフォルトのビルド先はdistフォルダですが、今回設定でdocsに変更してます。

## GitHubでリポジトリを作成
GitHub上でレポジトリを作成します。レポジトリ名は任意（今回はtest）の名前を付けます。無料で公開したい場合はPublicにする必要があります。
![スクリーンショット 2023-08-31 151214.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/90cf9d97-1bc7-3ed8-d0d6-448dd8dd101c.png)
![スクリーンショット 2023-08-31 151240.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/97047d60-d453-554e-75a2-9d82fd3126da.png)
「プロジェクト名」ディレクトリで以下のコマンドを入力し、プロジェクトをgit管理して、GitHub上に作成したレポジトリにpushします。
```cmd:cmd
> 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を選びます。
![スクリーンショット 2023-08-31 151723.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/ebc9249f-5f08-9cc0-60b4-85d53e865f62.png)
![スクリーンショット 2023-08-31 151748.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/bd354991-2ddc-abe6-6eab-cbf3d4cb4501.png)
branchの部分をmain、folderはdocsを選んで保存します。
![スクリーンショット 2023-08-31 151833.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/eb5cbbed-5959-4fc7-c744-05303e020967.png)
![スクリーンショット 2023-08-31 152655.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/4f04a14d-c9be-e27d-b638-0d557a19a8ff.png)
https://<アカウント名>.github.io/<レポジトリ名>/に公開されます。
（反映には若干の時間を要します）
下のActionsの部分でデプロイの経過を確認することができます。
![スクリーンショット 2023-08-31 151723.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3362025/c497a990-afe3-b73e-7da6-782bd0b80cd6.png)



# 参照
- [【Vue.js】10分でできる！ ～ Vue.jsのインストール → プロジェクト作成と起動まで～](https://qiita.com/C_HERO/items/318fe65871f8e53e8c80)
- [VueプロジェクトをGitHub Pagesに公開](
https://qiita.com/sindicum/items/f867db9de54630464fea)