🔖

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

2021/12/25に公開

はじめに

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テスト機能も追加しておいたので実施してみます。

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ログを切ったほうがいい

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で実行します。

lint
$ npm run lint

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

例えば、以下のように import の綴りをわざと間違えた状態で npm run lint を実行するとエラー箇所を検知してくれました。
スクリーンショット 2020-12-23 15.08.05.png

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

さいごに

一応、今回作成したものをGitHubのリポジトリを公開しました。

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

次の記事↓
CircleCI 試してみた

GitHubで編集を提案

Discussion