【Vue.js】FirebaseプロジェクトでVue CLI v4.0.4を作成する（Firebase・Vue CLI v4.0.4）

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Firebase Hosting
⭐️Vue CLI v4.0.4


Firebase HostingにVue CLI v4.0.4のプロジェクトを作成する方法

# Firebaseプロジェクトを作成する
<img width="1191" alt="001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/bca4354b-df90-a379-e0c4-3168671d086a.png">

プロジェクト名をつける。
「続行」ボタンを押す


<img width="593" alt="002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0c6499f2-d0a5-8b57-0a3e-33162344ba04.png">

# Googleアナリティクス
そのまま「続行」ボタンを押す
<img width="654" alt="003.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0deee19d-ba4d-5386-924c-6d1ba82e6ed5.png">

# Googleアナリティクスの構成

「Default Account for Firebase」を選択し「プロジェクトを作成」ボタンを押す
<img width="681" alt="004.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7cddfbec-5cb3-1db9-ecda-2cc98d0e48fc.png">


プロジェクト作成中

<img width="270" alt="005.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/fd696c12-caaf-b01f-795b-8d0173a07e85.png">

プロジェクト作成が終わり「続行」ボタンを押す
<img width="391" alt="006.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a5214895-6779-1e49-97b1-4d828419a35e.png">

プロジェクト作成完了。
<img width="1198" alt="007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a3d1354f-4d75-6c0b-1577-2d76bf79411d.png">

# Firebase Hostingを作成する

Hostingを始める
<img width="793" alt="008.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2426ede3-9422-a477-11b4-a2836f48aa40.png">

Firebase Hostingの設定でFirebase CLIのインストール
<img width="788" alt="009.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e20c2033-ecee-a21b-7c80-ad9972d862b6.png">

ターミナルを起動する
<img width="139" alt="010.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3c48e201-018a-f323-6e7f-6ae5cf6628b3.png">

以下のコマンドをコピーして、ターミナルに貼り付ける

```
npm install -g firebase-tools
```

<img width="590" alt="011.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2601d868-8c73-e304-928a-06af4d1ce73f.png">

# CLI Vue JS の新規プロジェクトを作成する

CLI Vue JSカウントアップを作ります。プロジェクト名「non_cli_count_up」を作ります。

```
vue create non_cli_count_up
```

<img width="402" alt="012.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a22a04d9-9310-520c-ba44-e9d5d82d73d8.png">

最初にどんなプラグインを一緒にインストールするかを聞かれます。
デフォルト「default」ではbabelとESlintが初期インストールされる設定で、手動「Manually select features」にするとパッケージが選択できる。

<img width="515" alt="013.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5662823f-51b2-c664-2621-4c6a047ae7c1.png">

・Babel とは新しい文法で書いたコードを古いWebブラウザでも動作するように変換してくれるツール。
・TypeScript（タイプスクリプト）
・Progressive Web App (PWA) Support（プログレッシブウェブアプリ）アプリのようなウェブサイト
・vue-routerとはVuejsのルーターライブラリです。 Vue.js 公式ルータ。画面を読み込まずにURLとコンテンツが切り替わります
・Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリ
・Css Pre-processors プリプロセッサー独自の 構文 で CSS を生成するプログラム
・Linter / formatter エラーや潜在的なバグを警告するもの
・Unit Testing 単体テスト
・E2E Testing開始から終了まで」が、期待通り動いているかをテストする

矢印キーの上、下で、カーソル移動します。
Spaceキーで、選択・選択解除。
「a」キーですべて選択・選択解除。
「i」キーで
[space]キー現在の状態を反転。

「Babel」「Router」「Vuex」「Linter」をSpaceキーで選択し、Enterキーで決定する

<img width="535" alt="014.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/72a6c2f9-9e5c-1148-28e5-1464019602d8.png">

## HTML5 History モードの選択

Vue Routerをhashモードで使う「n」か、Vue RouterのHistoryモードで使うか「Y」で選択する。
Vue RouterのHistoryモード、Yを選択する

<img width="566" alt="015.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5fd2b89a-8b75-39ab-828e-4707a6cc4a25.png">

詳細はHTML5 History モード参照
https://router.vuejs.org/ja/guide/essentials/history-mode.html

# ESLintプリセットの選択

ESLintのプリセットを選択をする
・ESLint with error prevention only ーエラー防止のみ
・ESLint + Airbnb config 
・ESLint + Standard config 
・ESLint + Prettier Prettier

「ESLint with error prevention only」 を選択する

<img width="641" alt="016.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a1e681c4-b354-a056-7778-2c27d9c92251.png">

# lint機能オプションの選択

Lintが実行されるタイミングを選択する。
・Lint on save 保存時にLint実行
・Lint and fix on commit コミット時にLint実行

<img width="639" alt="017.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d56c711b-320c-7f10-b55a-a3bf94a1d3fa.png">

「Lint on save」を選択する

# 設定ファイル設置箇所の選択

Babel・PostCSS・ESLintなどの設定をどこに設置するかを選択する。
・In dedicated config filesー専用の設定ファイル内
・In package.jsonーpackage.json内
「In dedicated config files」を選択する

<img width="636" alt="018.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a215b282-efed-8429-439d-c606a700babc.png">

# プリセット保存の選択

上記の設定内容を保存するかの有無
保存しない「N」を入力する

<img width="567" alt="019.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6fa90e18-0360-23c5-1b33-d055b5d1ed26.png">

インストール完了

<img width="463" alt="020.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3e151a41-3280-7f30-728c-13310f1b4fc8.png">

プロジェクトを移動する

```
cd non_cli_count_up
```

プロジェクトを起動する

```
npm run serve
```

<img width="428" alt="021.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a357f728-c719-1088-371e-ce2b5777beb0.png">

http://localhost:8080/

アクセスする

表示OK
<img width="784" alt="022.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/127d487b-052b-e3ce-2178-0355b7eba88b.png">

フォルダ構成
<img width="253" alt="023.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ec888ed2-e8fd-04e1-0bf1-2f425e45aeeb.png">

★起動

```
npm run serve
```

★ビルド

```
npm run build
```

★停止
「ctrl + c」 で停止できる


# プロジェクトの初期化
Firebaseにログインする

```
firebase login
```

<img width="617" alt="024.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5108f7c7-a6ab-91fa-72d6-f266cc45faa8.png">

# Firebaseの初期化をする

```
firebase init
```

「Hosting」を選択する。Spaceキーで選択してEnterで決定。

<img width="649" alt="025.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/871fd6d2-d155-ef8a-b560-1f7d1d1dd56b.png">

# プロジェクトの設定

Please select an option: (Use arrow keys)
❯ Use an existing project  既存のプロジェクトを使用する
  Create a new project  新しいプロジェクトを作成する
  Add Firebase to an existing Google Cloud Platform project Firebaseを既存のGoogle Cloud Platformプロジェクトに追加します
  Don't set up a default project 
デフォルトのプロジェクトを設定しないでください

ここでは、「Use an existing project 」既存のプロジェクトを使用する

<img width="597" alt="026.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ac7328c9-cb27-f4ca-2081-c39de14adb76.png">

# このディレクトリのデフォルトのFirebaseプロジェクトを選択する

 Select a default Firebase project for this directory: (Use arrow keys)
❯ non-cli-prj (non-cli-prj) 
ここでは、Firebaseのプロジェクトを選択する。

<img width="643" alt="027.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/60961e73-fecd-4a07-c6e6-23ebdfeb0e5f.png">

 What do you want to use as your public directory?
パブリックディレクトリとして何を使用しますか？
本番用のディレクトリのフォルダを入力します。
「dist」を入力する

<img width="426" alt="028.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/94a46174-b28d-cd7b-a3a0-3a71f0d3d5af.png">

Configure as a single-page app (rewrite all urls to /index.html)? 
単一ページのアプリとして構成します（すべてのURLを/index.htmlに書き換えます）
Yesの場合、firebase.json にrewrites設定が追記されます
Noの場合、404.htmlが作成されます。
ここでは、NOを選択します。

<img width="702" alt="029.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/74a1aa57-f9b9-e897-0c84-16f57ef3d2d2.png">

成功

<img width="533" alt="030.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5a04456e-1f8b-bb21-9c40-cebf0d36d419.png">

firebase npm パッケージをインストールし、package.json ファイルに保存します。

```
npm install --save firebase
```

<img width="500" alt="031.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/767c876b-c5d7-de0f-54b4-312e47b35872.png">

# ビルド実施

```
npm run build
```

<img width="568" alt="032.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/cc0dcd46-eef2-b279-cc37-d77b897e20a6.png">

# firebase のデプロイ

「firebase deploy」でデプロイが失敗する場合は、
Firebaseのプロジェクト名を引数にデプロイすると成功しました。
ここではプロジェクト名（non-cli-prj）

```
firebase deploy  --project non-cli-prj
```

<img width="735" alt="034.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/0034d34f-48c3-4600-fb23-75b496b122c5.png">

<img width="559" alt="033.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7b758821-9bb3-b1a6-0020-65b13420a39a.png">

Firebase表示成功
<img width="796" alt="035.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b0c060c4-0f93-010c-5c98-60df9acbb088.png">

# ファイル構成

<img width="298" alt="036.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5c00aa1c-6614-d101-eaee-ab4fa8123eb5.png">



【Vue.js】カウントアップ（Firebase・Vue CLI v4.0.4）
https://qiita.com/nonkapibara/items/94a77629236796716ff4


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🍬Vue.js🍬<br>Vue CLI（v4.0.4） でVue.js作って、<br>Firebase(FirebaseHosting) にデプロイしてみたよぉ🤩<br><br>【Vue.js】カウントアップ（Firebase・Vue CLI v4.0.4）<a href="https://t.co/W7sWcleX4A">https://t.co/W7sWcleX4A</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/Firebase?src=hash&amp;ref_src=twsrc%5Etfw">#Firebase</a> <a href="https://t.co/ajUgvvvoSZ">pic.twitter.com/ajUgvvvoSZ</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185650513469038592?ref_src=twsrc%5Etfw">October 19, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<br>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🎬Vue.js🎬<br>YouTubeの動画🎀APIリクエスト一覧表示🎀サンプル<br>作ってみたよぉ。<br>Vue CLI（v4.0.4） Vue.jsのaxiosでAPI通信🌏して、Firebase(FirebaseHosting) にデプロイ💡💡<br>ちゃんと動いたよぉ😍<a href="https://t.co/y7hw3zHRlI">https://t.co/y7hw3zHRlI</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/firebase?src=hash&amp;ref_src=twsrc%5Etfw">#firebase</a> <a href="https://t.co/C5zCM6n78R">pic.twitter.com/C5zCM6n78R</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185956946630692864?ref_src=twsrc%5Etfw">October 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>