vuetify環境を構築してfirebaseにhostするまでをまとめてみました.part1-環境構築編

#この記事では.

webを学んではや３ヶ月が経過して,vueを使ってお仕事をすることができました.
せっかくなので,自分でなにか作ろうと思いたち,使うことができなかったvuetifyと,はやりのfirebaseの勉強の事始めにしたいと思います.
part1では,プロジェクトを作りそのままhostingするだけです.
それぞれの使い方はpart2以降にして,まず環境構築を調べてみます.

#事前調べ
vue,vue-cli,vuetify,firebaseについて少し調べました.
特に新しいことは何もないと思います.

##vue
「The Progressive JavaScript Framework」がお馴染みなワード
[公式doc](https://jp.vuejs.org/index.html)

React, Angularに並ぶフレームワークだと思います.
最新のロードマップに比較などもあるので参考になります.
[road map](https://qiita.com/ushironoko/items/a2420cf4a28af56907e5)

##vue-cli
vueの開発ツールで,こいつでプロジェクトを管理できます.
[公式doc](https://cli.vuejs.org/)

今回は最新のVue CLI 3.0を使います.昔はv2系を使ってたのでコマンドなどが異なりますのでまとめます.
[最初に投稿したもの](https://qiita.com/binary2/items/575dedc3bea5d02a53f9)

##vuetify
vueには便利なコンポーネントライブラリが多数あります.NUXT（説明略）でインストールするときにも選択可能なライブラリの一つです.
[NUXTの例](https://ja.nuxtjs.org/guide/installation)

##Firebase
こちらは最近webやるようになったせいか,qiitaとかでよく目にするな-と思って今回始めて触りました.
googleが買収したmbaas(maas)でバックエンド側の処理をやってくれる便利なやつという認識です.
知識不足でゴメンナサイ..

#プロジェクト作成
##前提条件
npmが使える環境があり,エディタはVScode
追記ですが,vsCodeの拡張機能にVeturは必要です(vueの開発でコレ無しでは無理です.)

##vue-cli
```common-lisp
npm install -g @vue/cli
vue create todo-app
```
このあとに以下の選択が可能です.今回デフォルトでもいいですけど,せっかくなので説明する意味も込めてマニュアルモードでいきます.
<img width="314" alt="スクリーンショット 2019-01-08 21.10.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/c621bffd-205c-7bc0-1283-375c5f0c4fcf.png">
といったけど,簡単にしか触れないです.
タイプは今回やめておきます.PWA,UT,E2Eは知識不足で分かってないです.
<img width="348" alt="スクリーンショット 2019-01-08 21.28.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/8013c911-fbfb-64cc-46b4-de6b16c819f8.png">

その後も少し質問が続きます.

1.Use history mode for router ? > Y
2.Pick a CSS pre-processor > Sass/SCSS
3.Pick a linter > ESLint + Prettier
4.to invert selection > Lint on save
5.where do you prefer placeing config for ..? > In package.json

これでインストール開始になります.この後は起動できるかを確認します．
(v2系だとserverだったの変えてたのか..どうでもいいけど)

```common-lisp
cd todo-app
npm run serve
```
下でクリック！
http://localhost:8080/
<img width="562" alt="スクリーンショット 2019-01-08 21.38.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/c97225fd-8840-c11f-f2a9-0ac26576edb7.png">

まずはプロジェクト作成成功です:rocket:

##vuetify化
```common-lisp
vue add vuetify
```
この後の質問は,Choose a preset > Default

もう一度下でクリック！
http://localhost:8080/
<img width="924" alt="スクリーンショット 2019-01-08 21.48.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/8d89f3c4-40a8-7fff-9bfe-85589d6a37c2.png">

だいぶ雰囲気変わりました！:rocket:

### prettier(補足)
おそらくコマンドを叩いているだけでワーニング出ている可能性が高いです.
コード書いて保存するときに文法チェックがかかる設定をしています(Lint,Pretterのところです.)vsCodeの拡張機能を追加して設定をします.
<img width="1098" alt="スクリーンショット 2019-01-08 22.07.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/faf8654f-2b52-8de6-2965-89b720673a12.png">
拡張機能からインストールを行います.
完了後は設定をします.

```json:設定ファイルに追加する
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
```

こちら,正直良くわからずに行ってます.ワーニング出ないし統一してかけているからいいやレベルです.今後勉強して行きます.

# ホスティング
##　事前準備
googleアカウントのみです.
サイトからプロジェクト作らなくてもコマンドから作れるけど簡単なので今回はこちらを採用です.

## プロジェクト作成
ログイン>コンソールへ移動>プロジェクトを作成します.
[firebase](https://firebase.google.com/)
<img width="1070" alt="スクリーンショット 2019-01-08 22.32.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/6d623d2b-f916-82aa-0d66-1c537ed05d37.png">

完了後、</>ボタンからソースをコピしておきます.
これで環境構築終わりです:checkered_flag:

<img width="1059" alt="スクリーンショット 2019-01-08 22.35.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/2776e9c2-0fee-71c4-0b1f-e9a27102de33.png">

## ホスト用ファイル作成
開発環境に戻ります.
まず以下のコマンドで叩きます.

```common-lisp
vue install firebase -save
```

その後に,main.jsにさっきのコピーをペーストします.
<img width="305" alt="スクリーンショット 2019-01-08 22.45.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/e55ad764-1a46-cf2e-39b5-09c7a6cf23db.png">

これで保存するときに補完などがはしればPrettierも正常に動いている?

```common-lisp
npm run build
```

これでホスト用ファイル作成完了です:checkered_flag:

## デブロイ

次に以下を実行します.これを使ってデブロイします.

```common-lisp
npm install -global firebase firebase-tools
```

```common-lisp:Login&Init
firebase login
firebase init
```
<img width="699" alt="スクリーンショット 2019-01-08 22.51.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/b2f671ec-df95-443b-9179-e1cbc36647c1.png">

Hostingを選択します.
その後にプロジェクトを選択します(先程作ったけどここでも作れた！)
最後に３つ質問があります.
1.What do you want to use as your public directory ? > __dist__(さっきビルドしたやつ)
2.Configure as single-page app > Y
3.File dist/index.html already exists. Overwriet? > No

```common-lisp:Login&Init
firebase deploy
```

これで終わりです.
[デブロイしたもの](https://todo-app-1d748.firebaseapp.com)

随時更新するので,画像もつけておきます.
<img width="886" alt="スクリーンショット 2019-01-08 23.06.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/283053/717b8219-d84d-cfc8-1f32-b0438f286b56.png">

#まとめ
vue-cli3 + vuetify + firebase　の環境構築をしました.:relaxed:
Prettierなどの設定が少し曖昧..:see_no_evil:

感想は結構簡単だった.(web初心者だし.今までSIerみたいな仕事だったので自分でバックエンド環境を作ったことないので難しいものとと敬遠していた..)
vue-cli3のvue uiも少し調べてみたいな

環境構築は完了しました!
part2ではtodoを作りました.

[part2作りました](https://qiita.com/binary2/items/fcc354f4dc11b1d57d0e)

#更新履歴
veturを前提条件に追記しました.
part2作ったのでリンク,タイトルを少し変更しました.