yarnでVue.js・Vuetifyのインストール手順を解説！バージョン2系と3系に対応

オープンソースでJavaScriptのフレームワークとして人気の高い『Vue.js』および『Vuetify』。

多くの機能やコンポーネントが用意されており、Webアプリケーションの構築が容易となる。

ドキュメントも豊富で、モダンなデザインに設計されている点も評価されている。

この記事では、そんな簡単でオシャレなUI画面を実装できるVue.jsとVuetifyのインストール手順を解説していく。

インストール自体も難しい手順はないので、是非環境構築をして試してみてほしい。

事前準備

この記事では、JavaScriptのパッケージマネージャーの一つである『yarn』を使用する。

もし yarn の導入が完了していない場合は、こちらの記事も合わせてご覧頂きたい。

Vue.js導入手順

インストール

はじめに、以下のコマンドでインストールをする。

yarn global add @vue/cli

バージョン2系のコマンド等を使用する場合は、以下も合わせて実行する。

yarn global add @vue/cli-init

インストール後、以下のコマンドを実行して、正常にインストールされていることを確認する。

vue -V

もし、コマンドが実行できない場合はパスが通っていない可能性がある。

macOSの場合は~/.zshrc、Linuxの場合は~/.bashrcなど、使用しているシェルに応じて以下を追記する。

export PATH=$PATH:/Users/freichel/.yarn/bin

プロジェクト作成

続いては、以下のコマンドで3系のプロジェクトを作成する。

既に作成されているディレクトリを指定するとmergeするか聞かれる。

vue create {ディレクトリ名}

以下のようにバージョンや使用するパッケージマネージャー等を聞かれる。

今回はfrontendディレクトリをバージョン3系で作成し、パッケージマネージャーは yarn を選択している。

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

? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn 
  Use NPM

プロジェクトの作成が開始、正常に完了すると以下のような出力結果となる。

% vue create frontend 
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes


Vue CLI v5.0.8
? Target directory /Users/username/project-name/frontend already exists. Pick an action: Merge


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn


Vue CLI v5.0.8
✨  Creating project in /Users/username/project-name/frontend.
⚙️  Installing CLI plugins. This might take a while...

yarn install v1.22.19
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 26.37s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 5.98s.
⚓  Running completion hooks...

📄  Generating README.md...

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

 $ cd frontend
 $ yarn serve

Vuetify導入手順

Vuetifyは開発が常に進行しており、新規機能の追加や改善が行われている。

バージョン対応やロードマップについては、公式のページを参照していただきたい。

インストール

以下のコマンドにてVuetifyをインストールする。

vue add vuetify

以下のような警告が出る場合がある。

先程の vue create で作成した変更分をコミット・プッシュすると改善される。

WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N)

インストールが開始されると、以下のような選択を求められる。

? Choose a preset: 
  Configure (advanced) 
❯ Default (recommended) 
  Vite Preview (Vuetify 3 + Vite) 
  Prototype (rapid development) 
  Vuetify 3 Preview (Vuetify 3)

vue create で作成したプロジェクトが2系か3系かで選択肢が変わるので注意が必要。

2系では問題ないが、3系でdefaultを選択するとエラーとなる。

🚀  Invoking generator for vue-cli-plugin-vuetify...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

今回は3系でプロジェクトを作成したので、Vuetify 3 Preview (Vuetify 3) を選択した。

% vue add vuetify
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-vuetify...

yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-vuetify@2.5.1
info All dependencies
└─ vue-cli-plugin-vuetify@2.5.1
✨  Done in 1.39s.
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Vuetify 3 Preview (Vuetify 3)
? Would you like to install Vuetify 3 nightly build? (WARNING: Nightly builds are intended for development testing and may include bugs or other issues.) Yes

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...

yarn install v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 5.74s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

動作確認

作成したプロジェクト配下に移動し、以下のコマンドでサーバーを起動する。

yarn serve

正常にサーバーが起動すると、以下のような出力となる。

% yarn serve
yarn run v1.22.19
$ vue-cli-service serve
 INFO  Starting development server...


 DONE  Compiled successfully in 1372ms                                                                                                                                                     22:09:22


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

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

http://localhost:8080/ または接続されているネットワークのIPアドレスからアクセスが可能となる。

Google Cromeなどのブラウザからアクセスしてみよう。

アクセスすると以下のような画面が表示されるはずだ。

この画面が表示されれば、正常にインストールおよびサーバーの起動ができている。

ちなみに、同じネットワークに接続しているスマートフォンからも同様にアクセスが可能。

モバイルファーストも考慮して、UI画面を作成した際は、実際にスマートフォンからの操作性も試してみるといいだろう。

まとめ

以上、JavaScriptの人気フレームワークであるVue.jsとVuetifyのインストール手順を解説した。

この記事が少しでも参考になり、環境構築の手助けとなると幸いだ。

reichelblogでは、他にもプログラミングに関することをまとめているので、合わせてご覧いただきたい。

最後まで目を通していただき、ありがとうございました。