More than 3 years have passed since last update.

Vuetifyプロジェクトの作成方法

Posted at 2021-10-12

#はじめに
Vuetifyを使用した画面を作成したいときにこれを見る。

#概要

VueCLIのインストール

ターミナルを開いて次のコマンドを実行。
vueCLIがインストールされているか確認できる。
@vue/cli x.x.xと表示されればインストール済み

vue --version
@vue/cli 4.5.13

ない場合はインストールする

npm install -g @vue/cli

#プロジェクトの作成
適当なディレクトリに移動し、下記コマンドでVueプロジェクトを作成する。
Documentディレクトリの中にvueディレクトリを作成、
その中にvue-applicationという名前でvueプロジェクト作成。

cd Document
mkdir vue
vue create vue-application

途中で選択肢が発生する。
default
vue2
て感じで選ぶ。
完了すると下記のような表示。

🎉  Successfully created project vue-application.
👉  Get started with the following commands:

 $ cd vue-application
 $ npm run serve

$の2行を実行する。
表示されるlocalのアドレスをブラウザで開くとvueのロゴが画面に表示される。

#Vuetifyライブラリの追加
下記コマンドでVuetifyをインストールする。

vue add vuetify

App.vueを編集していけばOK。

#参考