0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

ItayaAdvent Calendar 2022

Day 21

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

Last updated at Posted at 2022-12-20

概要

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

スクリーンショット 2022-12-20 21.03.46.png
こんな感じで初期の画面が表示されます。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?