Vue.jsのプロジェクトをVue UIを使って作成しよう！

# 初めに
どうも、最近あまり開発できていない人です。

この記事では、Vueプロジェクトの作成方法を細かいところまで紹介していきます。

この記事は、自分用のメモ帳(掲示板)を作る途中にまとめたものなので、掲示板を作る前提で話しています。
自身の開発の参考にこの記事を使う場合は、ミスらないように

# バージョン
```bash
C:\> node -v
v16.10.0

C:\> npm -v
8.0.0

C:\> vue -V
@vue/cli 4.5.13

C:\> firebase -V
9.23.0
```

# 簡単な手順
1. Vueプロジェクトを作る
1. Firebase Realtime Databaseに接続
1. Firebase OAuthを実装
1. Netlifyにデプロイ

# Vueプロジェクトの作成
ということで、始めていきましょう

最初は、Vue.jsのプロジェクトを作ります。
まぁ、作るといっても自動生成ですが（）

では、コンソールを用意しましょう。
Windowsの方は「Win + R」を入力したら出てくるやつに、「cmd」と入力してあげると、コマンドプロンプトが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/b24fbe8c-c5d2-6afb-46af-40efc895d589.png)
便利ですよねー

余談ですが、僕は【Windows Terminal】を使ってます
コンソールをタブで管理できるので、便利です！

https://www.microsoft.com/store/productId/9N0DX20HK701


ちょっと脱線しましたが、用意したコンソールに以下のコマンドを入力しましょう。

```bash
C:\> vue ui
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/788d5872-2052-d026-8d7a-1ade6da8ab96.png)
上のように二行でてきて、新しいタブが勝手に開いたら正解です

## プロジェクトの場所を指定
さて、プロジェクトの作成をしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/f80f1043-ae8c-1ce2-f6bd-5fc956549419.png)
（まだリリースできてないやつは隠させてください...）

↑こんな画面になっていれば正解です

以下のような画面になっていた場合は、左下の家マークを押して少し待つと、上の画面になります
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/6902c156-360d-2882-64bc-1e4a420d3632.png)

---

1. 上のタブの真ん中「＋作成」をクリック
1. プロジェクトディレクトリを置きたい場所に移動
1. 下にある「+ ここに新しいプロジェクトを作成する」を押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/18325c28-c649-aa3b-32de-6fa385613ae3.png)

## プロジェクトの詳細設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/a50ea6bc-2b84-7bf2-365e-5812c4b0ffee.png)

上手くいっていれば、こんな画面になっていると思います。

1. プロジェクト名を決める
1. パッケージマネージャーを決める

プロジェクト名は、下にあるように、「掲示板」は「Bulletin Board」らしいので、「Bulletin」に決めました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/595c9fb5-1397-7a67-48a7-3adcb76f275d.png)

パッケージマネージャーはnpmです。
~~（yarn 使ったことない）~~

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/0f1c4108-97c9-352d-740f-7293d573a7fd.png)
こんな感じになってます。

下の「次へ→」を押すと、次に進みます。

## プロジェクトのプリセット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/112bd4fb-cc3d-f859-7834-39d338da2e30.png)
こんな画面になっているはずです。
僕は、しょっちゅうプロジェクトの作成をするので、プリセットが登録されていますが、ない人もいると思います。
なので、この記事では、「手動」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/2361908f-41f5-37ea-97b7-8994d2cd0c53.png)
「手動」を選択し、「次へ→」を押します。

## プロジェクトの機能設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/a8ca9406-ebae-faae-662a-6720f4ba2af6.png)
このような画面になっていると思います。
なんか、ｺﾞﾁｬｺﾞﾁｬしてますね。

---

- Choose Vue Version
- Babel
- Router
- Vuex
- Linter / Formatter

にチェックをつけてください
それ以外は、オフで

チェックをつけ終わったら、下の「次へ→」をクリック！

## プロジェクトの最終設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/6ea7d7a2-8015-1479-af28-8a92a4c387fc.png)
このような画面になっていれば、正解です

現時点では、Vue 3.xはプラグインが不安定なので、Vue 2.xを使います。
Vue Routerはhistory modeを使うので、オンにしましょう
Linterのやつは、よくわからないので、三つ目の「Standard」って書いてあるやつにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/44fa1c16-ae31-5c62-fcdc-0af587fd9120.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/96a652d4-6c3c-f05f-5d11-403b1199fc39.png)
さて、ここまで設定が終了したら、下にある「✔ プロジェクトを作成する」をクリック！
そうすると、プリセットを作成するか聞かれます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/93748914-ff4b-a02e-51b7-995c0a775312.png)
**作成したい人**は、わかりやすい名前を入力し、「プロジェクトを作成する」を押します
**作成したくない人**は、「保存なしで続ける」を押します。

そうすると、コンソールでインストールが始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/25eba414-5e2c-c524-ba69-81fe57c550a6.png)

インストールが終了すると、このような画面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/03182f8b-9ca6-5bd3-a3d7-11584c8cd653.png)

この画面が表示されたら、プロジェクト作成完了です。
お疲れさまでした。

# 番外編
番外編として、プラグイン/依存のインストール方法を紹介していきます。

## Vuetify(プラグイン)のインストール

僕がよく使う、「マテリアルコンポーネント」を追加してくれる
Vuetify
と呼ばれるプラグインを使います。

まず、サイドメニューの上から二つ目のアイコンを押し、プラグインページに行きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/b86e5d5f-f957-b5b3-e447-1e9e2d1ab162.png)

そうしたら、右上の「＋プラグインを追加する」をクリック

「Vuetify」を検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/435ec51c-70e6-4289-bafa-6b3d964a0635.png)

一番上のVuetifyをクリックし、右下の「vue-cli-plugin-vuetifyをインストール」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/d4502311-03c4-cb68-5ce8-77aaf4e18ac5.png)

インストールが開始するので、少し待ちます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/b1518363-cd4a-ffd4-f10f-c3b03d249683.png)
いくつか選択肢がありますが、「Default」にしてください。

そしたら、下にある「インストールを終了する」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/70eb9738-e49f-70b1-34bd-70748b730dd9.png)
このような画面になったと思います。
下にある「続ける」を押し、終了します。

## Firebase(プロジェクト依存)のインストール
プロジェクトの名前の部分を押すとプロジェクト画面になります。

サイドバーの上から三つ目「依存」を押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/2af0db5a-8e9a-8994-200d-82718938935a.png)
このような画面になっていると思います

そしたら、右上にある「＋依存をインストール」をクリックします

検索画面が出てくるので、「Firebase」と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/a4f9220e-b90f-58cb-88a1-358f20b806de.png)

候補の一番上を選択(クリック)し、右下の「↓ firebaseをインストール」をクリック

コンソールの方で、firebaseのインストールが始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/654f5814-ed43-d3b4-f29c-00d4492bac77.png)

完了すると、自動的に画面が戻ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/efd585e7-b7cf-9533-9b48-08ae0236db23.png)
依存一覧に「firebase」があることが確認できれば、インストール完了です。


# さいごに
いかがでしたか？

Vue.jsのプロジェクトって、VueUI使えば一瞬で作れます。
プラグイン/依存系もボタンをﾎﾟﾁﾎﾟﾁするだけで管理ができてしまうので、楽です。

みんなもやってみてね〜 ﾉｼ