vue-cli でプロジェクト作成してあれこれ試してみた（初心者向け）
はじめに
GitHub+CircleCI入門の記事をみて、この記事のように実践しようとしたら、話の途中で vue-cli がでてきてよくわからなかったので、実際に動かしてみたことを備忘録のついでに記事を書いてみました。
※ Webフロントエンド開発超初心者です。
vue-cliとは
コマンドラインを使ってvue.jsで開発を行うための前準備を支援してくれるツールらしいです。
webpackも一緒にインストールされるでプロジェクトを作成すればすぐに開発を開始することができます。
webpackについての説明はここのサイトが簡単でわかりやすかったです。
インストール
npm install でインストールします。
一応バージョンも確認。
$ npm install -g @vue/cli
（省略）
$ vue --version
@vue/cli 4.4.6
プロジェクトの作成
vue create [プロジェクト名] でプロジェクト作成。
$ 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 でローカルサーバーが起動します。
$ 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 でビルドしてくれます。
$ 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テスト機能も追加しておいたので実施してみます。
$ 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ログを切ったほうがいい
$ 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で実行します。
$ npm run lint
実際にこちらのコマンドで実行してみましたがよくわかりませんでした。
わざと間違えてみるような記述をしましたが検知してくれなかったです。。。（なぜ？）
デフォルトの設定だけではいけなさそうです。
今後わかり次第追記します。
例えば、以下のように import の綴りをわざと間違えた状態で npm run lint を実行するとエラー箇所を検知してくれました。
（でも、これってVSCodeが教えてくれるからわざわざ lint を実行する必要はないのでは、、、？ どなたか lint の効果的な活用方法を教えてただきたいです。）
さいごに
一応、今回作成したものをGitHubのリポジトリを公開しました。
今後はこちらを CircleCI に連携したいと思っております。
次の記事↓
CircleCI 試してみた
Discussion