vue-cli でプロジェクト作成してあれこれ試してみた（初心者向け）

# はじめに
[GitHub+CircleCI入門](https://qiita.com/tatane616/items/8624e61473a9957d9a819)の記事をみて、この記事のように実践しようとしたら、話の途中で vue-cli がでてきてよくわからなかったので、実際に動かしてみたことを備忘録のついでに記事を書いてみました。

※ Webフロントエンド開発超初心者です。

# vue-cliとは
コマンドラインを使ってvue.jsで開発を行うための前準備を支援してくれるツールらしいです。
webpackも一緒にインストールされるでプロジェクトを作成すればすぐに開発を開始することができます。

webpackについての説明は[ここのサイト](https://scrapbox.io/vue-yawaraka/webpack(vue-cli)%E3%81%AF%E4%BD%95%E3%82%92%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B%E3%82%82%E3%81%AE%E3%81%AA%E3%81%AE%E3%81%8B)が簡単でわかりやすかったです。

# インストール
npm install でインストールします。
一応バージョンも確認。

```bash:インストール
$ npm install -g @vue/cli
（省略）
$ vue --version
@vue/cli 4.4.6
```

# プロジェクトの作成

`vue create [プロジェクト名]` でプロジェクト作成。

```bash:プロジェクトの作成
$ vue create my-project
```
vue create コマンド入力後、質問されるがお好みで設定します。
もし、ここで選択し忘れても、あとからでも導入できる（らしい）のであまり気にしないほうが良さそうです。

ちなみに今回は以下のようにしました。
<img width="581" alt="スクリーンショット 2020-07-29 1.55.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/2c916a13-a55d-f438-47b8-c6140570bea3.png">

# ローカルサーバーの起動
`npm run serve` でローカルサーバーが起動します。

```bash:ローカルサーバーの起動
$ cd my-project
$ npm run serve
```

コンソールはこんな感じです↓
<img width="526" alt="スクリーンショット 2020-07-29 2.01.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/6c0431d6-b618-4f0c-e669-b2251cd62a20.png">

とりあえず動いたみたいなので http://localhost:8080/ にアクセスしてみるともうWebページが作成されていました。（はやすぎ！）
<img width="667" alt="スクリーンショット 2020-07-29 2.04.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/2136c252-5e34-75b4-9dc7-97d511d9d74b.png">

# ビルド

`npm run build` でビルドしてくれます。

```bash:ビルド
$ npm run build
```

これによってなにが起きているかというと、distというディレクトリに必要な html, js, css などのファイルたちをいい感じにまとめてくれているみたいです。

本番環境にはこのdistディレクトリの内容をデプロイすればいいわけですねーなるほど

<img width="749" alt="スクリーンショット 2020-07-29 2.24.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/e81575fd-6b5c-c273-d5ba-08634bd46950.png">

# Unitテスト

インストールのオプションでUnitテスト機能も追加しておいたので実施してみます。

```bash:Unitテスト
$ npm run test:unit
```
コンソール上はこんな感じです。
<img width="534" alt="スクリーンショット 2020-07-29 2.31.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/a54e9319-345d-5abd-343d-9e753f9ccd1e.png">

どうやら、tests/unit/example.spec.js に書かれたテストコードが動いているみたいです。

ためしにわざと間違えてみます。

<img width="842" alt="スクリーンショット 2020-07-29 2.34.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/a55404d7-d139-38b9-f248-86469ef4cd53.png">
なんか赤が出てすごいことになりました笑
これは `--silent` のオプションをつけると良いとのことです。

[npm run testするときはnpmログを切ったほうがいい](https://qiita.com/frost_star/items/83d58072374d61de9e10)

```bash:Unitテスト
$ npm run test:unit --silent
```
<img width="599" alt="スクリーンショット 2020-07-29 2.44.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/7d408354-94bb-9972-1de7-b4de261a899b.png">
これで実行すると npm ERR! が消えてめっちゃすっきりしました。

# lint

lint とはフォーマットを整えてくれたり、コード上よくないところを注意してくれるらしいです。
`npm run lint`で実行します。

```bash:lint
$ npm run lint
```

~~実際にこちらのコマンドで実行してみましたがよくわかりませんでした。~~
~~わざと間違えてみるような記述をしましたが検知してくれなかったです。。。（なぜ？）~~
~~デフォルトの設定だけではいけなさそうです。~~
~~今後わかり次第追記します。~~

例えば、以下のように `import` の綴りをわざと間違えた状態で `npm run lint` を実行するとエラー箇所を検知してくれました。
![スクリーンショット 2020-12-23 15.08.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259125/ff4f96c0-b11d-134c-4240-708e617d7f0a.png)

（でも、これってVSCodeが教えてくれるからわざわざ lint を実行する必要はないのでは、、、？ どなたか lint の効果的な活用方法を教えてただきたいです。）

# さいごに
一応、今回作成したものをGitHubの[リポジトリ](https://github.com/suguruTakahashi-1234/circle-test)を公開しました。

今後はこちらを CircleCI に連携したいと思っております。

次の記事↓
[CircleCI 試してみた](https://qiita.com/sugurutakahashi12345/items/aeca12d9c5a5526c724c)