[2022年]Vue2のプロジェクト作成〜Vuetifyの導入まで

概要

Vue2でプロジェクトを作成してVuetifyを導入するまで

手順

Vue2のプロジェクト作成

下記のコマンドでVueのプロジェクトを作成

vue create プロジェクト名

途中でバージョンなどの指定方法が出てくるので

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

Vue2を選択

Vuetifyの導入

開発するにあたってデザインちゃんとやれる自信がないのでVuetifyを導入します。

cd プロジェクト名

でプロジェクトの中に入って下記のコマンドを実行

vue add vuetify

途中で選択肢が出てくるので

? Choose a preset:
  Vuetify 2 - Configure Vue CLI (advanced)
❯ Vuetify 2 - Vue CLI (recommended)
  Vuetify 2 - Prototype (rapid development)
  Vuetify 3 - Vite (preview)
  Vuetify 3 - Vue CLI (preview)

Vue2のcliを選択....終了！

軽く動作確認

下記のコマンドを実行すると

npm run serve

こんな感じで初期の画面が表示されます。