Vuetifyのインストールから初期表示まで

Vuetifyのインストール

VuetifyはVue.jsのUIライブラリーです。デザインの知識がなくても、GUI画面を簡単に作成することができます。

Vuetifyサイトへ行きます。
https://vuetifyjs.com/ja/

はじめようをクリックします。

ここではVue CLIからインストールする手順をご紹介します。
Vue CLIのインストールについては、VueCLI(Vue.js)の環境構築を参照ください。

Vueプロジェクトを作成します。

$ vue create myapp
$ cd myapp

Vuetifyをインストールしていきます。

# Vuetifyをインストール
$ vue add vuetify

yを選択

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

※下記エラーが出た場合、記事執筆時点で、VuetifyはVue3に対応していないため、プロジェクトをVue2で作成し直してから、再度、vue add 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.
    at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/runTransformation.js:60:17)
    at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:332:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:318:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:204:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:92:3)

Defaultを選択

📦  Installing vue-cli-plugin-vuetify...
added 9 packages in 6s
✔  Successfully installed plugin: vue-cli-plugin-vuetify

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

下記が出たら成功です。

✔  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

Vuetify実行

サーバを起動します。

npm run serve

指定されたURL　http://localhost:8081/ にアクセスします。

DONE  Compiled successfully in 78013ms                                                                       4:49:28 PM


  App running at:
  - Local:   http://localhost:8081/
  - Network: http://x.x.x.x:8081/

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

下記画面が表示されたら成功です！