Chapter 03無料公開

Vue、Vuetifyのセットアップ

taka
taka
2021.12.07に更新

Vue3.0のセットアップ

まずはVueのセットアップから始めます。
公式サイトにあるように、Vueのセットアップには"vue create"コマンドを使用します。

以下のコマンドを適当なディレクトリ

$vue create todo-apps

このコマンドを実行すると下記のようにvueのバージョン選択をするよう聞かれます。
中段のvue3を選択しましょう。

これでvueのインストールは完了です。

Vuetify3.0-alphaのセットアップ

Vue3をサポートしたVuetify3.0は現在、alpha版となっています。
来年の2月に公式リリースのようなので、今回はalpha版を使用していきます。
今回使用する予定のタグは、Vuetify2.6.1と変わらないようなので、コンポーネントの使い方などは、Vuetify2.6.1のサイト
を確認しながら行っていきます。

Vuetifyの公式サイトにもありますが、
まずは先ほど、vueインストール時に作成したディレクトリに移動します。

$cd my-app

vue-cliをインストールしている場合は、下記のコマンドが使えます。
これだけで必要なセットアップは全て完了します。とっても簡単ですよね。

$vue add vuetify

では早速起動してみましょう。

$yarn run serve

こんな画面が表示されると完了です。
お疲れ様でした。