LoginSignup
0
0

More than 1 year has passed since last update.

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

Posted at

はじめに

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

概要

  1. VueCLIのインストール
  2. プロジェクトの作成
  3. 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。

参考

0
0
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
0