【学習記録③】Vue CLIを使ってみる！

はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
過去の学習記録の記事を書く際はJSFiddleを用いていましたが、実際に開発を行う場合は基本的にVue CLIを用いるということを知ったので今回の記事ではVue CLIについて書いていこうと思います。

Vue CLIとは

Vue CLIとはVue.jsの開発をより効率的に行うように手助けしてくれるツールです。

公式のページには以下のメリットが書かれています。

・Feature Rich
特定のESバージョンへ変更するbabelやUnitテスト・E2Eテストなどが利用しやすい！（サポートしている）

・Extensible
プラグインの取り込みが容易

・No Need to Eject
ejectせずともプロジェクトを最新に保つことができる
（これはこの記事を書いている時にはピンと来てないのですがejectすると元に戻せないからそのリスクがなくなるとかそういうことでしょうか...？まあ分かったらまた記事にしようかな？）

・Graphical User Interface
Vue CLIというツールなのにGUI！？という感じですが、調査した感じだとどうやらGUIもあるようで、以下の記事がとても分かりやすかったです！

・Instant Prototyping
一つのVueファイルでサクッと簡単なアプリが作れてしまう！

・Future Ready
ES2015にネイティブに対応しているブラウザ向けのビルドなどが行える！
（ちょっと今の知識だとbabelでいいんじゃない？とも思ってしまったので使っているうちにこれの意味等がちゃんと分かったら記事にします）

Vue CLIのインストール

まずはNode.jsをインストールします。

インストール完了後、nodeのバージョンをターミナル等で確認すると以下のようにバージョンが表示されることが分かります。

C:>node -v
v14.18.1

nodeをインストール後、以下のコマンドを実行してVue CLIをインストールします。

C:>npm install -g @vue/cli

無事にインストールが完了したら以下のようにvue cliのバージョンを確認することができます。

C:>vue --version
@vue/cli 4.5.14

Vueプロジェクトの作成

それではVueプロジェクトを作成してみます。
任意のフォルダで以下のコマンドを実行し、プロジェクトを作成します。

C:\Work\VuePractice>vue create vuePractice
Invalid project name: "vuePractice"
Warning: name can no longer contain capital letters

あれ？プロジェクトの名前はキャメルケースにするのはダメなんですね(;^_^A

ということでケバブケースにしてみました。

C:\Work\VuePractice>vue create vue-practice
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation?

「中国版npmみたいなものを使うと速いよ！」と出ますが、まあ、本家のnpmを使うことにします。
ここはNoとします。

Vue CLI v4.5.14
? Please pick a preset:
  Default (Vue 3) ([Vue 3] babel, eslint)
  Default (Vue 2) (babel, eslint)
  Manually select features

今回はDefault (Vue 3) ([Vue 3] babel, eslint)を選んでいきます。
インストールが終わると以下のように複数のフォルダやファイルが作られていることが分かります。

以下のコマンドで起動してみましょう。

C:\Work\VuePractice\vue-practice>npm run serve
> vue-practice@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 3538ms

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

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

localhost:8080へアクセスしてみると以下のようにアプリが立ち上がっていることが分かります。

おわりに

今までは簡単なVueの文法等の勉強でしたがいよいよ本格化してきた感じがします。
フォルダ構成やVueファイルの内容等をしっかり理解していきたいと思います。