Vue.jsでログイン画面作り続けないと発作が出るお話（環境構築編）

![2019-07-10-miyaji-vue-create-login_test-000.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403350/7a965b77-b3c8-fc45-3875-ef6c6c8e452f.jpeg)


「...うぅ...つ...作りたい...作りたいぃ...」

![2019-07-10-miyaji-vue-create-login_test-001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403350/0154db23-700b-bd23-bf59-c5461cb05791.jpeg)

「**ログイン画面を...作りたいィィィィィィィィィ！！！！！**」

![2019-07-10-miyaji-vue-create-login_test-002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403350/ddf2ce21-c91b-4e26-a8df-bb2eb9bfc80c.jpeg)

すいません。唐突に**ログイン画面を作らないと発症する発作**が出てしまいました。みやゆーです。

発作を収めるために早速ログイン画面を作っていきたいと思います。

# どうやって発作を抑えるか

とはいえ、**どのようにログイン画面を作っていくかが問題です。**

今回の発作は急に発症し、症状も激しいので一刻の猶予もありません。

ここはサクッとページを作成していける**Vue.js**と,導入やユーザー管理も簡単な**Firebase**を使って作っていきましょう。

なぜVue.jsとFirebaseを使うのかは、それを説明しないと発症する発作が出れば説明します。強いて言えば「**少しだけ知見があるから**」。そんなもんです。

# できるかな？じゃない、やるんだよ

早速やっていきましょう。まずは環境構築です。

## 環境構築

```console
$ node -v
v10.15.3

$vue -V
3.7.0

$ npm -v
6.4.1
```

Vue-cliのバージョン確認は`-V`ね。小文字じゃないよ。

んでVue-cliは、3.0以前と以降で**若干インストールのコマンドが違う**んですよ。

まだ導入してない人は気を付けてね！

## パッケージのインストール

いわゆるログインページの"**器**"を作ります。

コンソールで今いる場所を確認してから作ってね。直下にプロジェクトファイルができます。

```console
vue create login_test
```

なんか出てきた。

```console
Vue CLI v3.7.0
┌───────────────────────────┐
│  Update available: 3.9.2  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features
```

ほーん。`default`か`Manually select features`を選べってか。

`default`には`babel`と`eslint`しか入ってないのね。

他にもいっぱいぶち込みたいので`Manually select features`を選びましょう。

```console
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
>( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
```

必要なものにカーソルを合わせてスペースでチェックを入れていきましょう。

今のところ必要なのは以下の2つ。

- Router: ページ遷移するのに必要
- Vuex: 後述

Vuexについては後で説明しますが**めちょめちょに大事**なので絶対入れといてください。後からでも入れれるけどね。だるいので。

```console
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
```

Yesで大丈夫です。

```console
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
```

これも1番上で大丈夫。

```console
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
```

上でいいでしょう。

```console
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
```

BabelとかESLintの設定をどこに置くか。私は全部package.jsonにまとめてあるほうが好きなので下ですね。ここら辺は全部好みです。

```
? Save this as a preset for future projects? (y/N)
```

今後プロジェクトを作るときに今までの設定を反映させるか。んー...今回だけなのでNoで。

```console
Vue CLI v3.7.0
✨  Creating project in C:\Users\miyaji.yusei\Documents\login_test.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.15.2
info No lockfile found.
[1/4] Resolving packages...
```

（ ＾ω＾）おっ

インストール始まりましたね。

```console
success Saved lockfile.
Done in 14.09s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project login_test.
👉  Get started with the following commands:

 $ cd login_test
 $ yarn serve
```

インストール終わりっ！めっちゃ簡単。

これで環境が整いました！テンプレートができてるはずなので起動してみましょう！

```console
$ cd login_test
$yarn serve
```

起動してくれます。。。

```
 DONE  Compiled successfully in 5902ms                                                                                                               17:43:36


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.116.39:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.
```

起動完了！Vue.jsのlocalhostはデフォルトで8080です。chrome等でURLを叩きましょう。

localhost:8080

![2019-07-10-miyaji-vue-create-login_test-003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403350/cdb2b2a0-1000-cd3e-f7bc-e35fcf5d01a6.png)

できた！あとはログイン画面を作るだけや！

![2019-07-10-miyaji-vue-create-login_test-004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403350/ff079f77-6d35-6d7f-936b-5e89afa33ad7.jpeg)

まだまだ長いやんけ...

でも発作は収まったので良しとします。

また発症したら続きを描きます。みやゆーでした。