（１）Vue + Vuetify でローカル開発環境をセットアップ

この記事は

Vue、Vuetifyを使って、Vueの機能の確認を簡単に行う方法を説明した記事です。（VuetifyはVueをベースにしたUIライブラリです。）
HTML、CSS、コマンドラインの使い方（Windowsのコマンドプロンプト、MacのTerminal）はある程度理解していることが前提です。

開発環境は以下の通りです。（バージョンは2020年9月時点の最新です）

• Vue: 2.6.12
• Vue CLI (command line interface): 4.5.6
• Vuetify: 2.3.10
• Node.js : 6.14.6
• Windows10 or MacOS

開発環境のセットアップ

以下のソフトウェアを順番にインストールします。Vue, Vuetifyは、npmを使ってインストールしますので、先に、Node.js環境のインストールが必要となります。

1. Node.jsのインストール

Node.jsをダウンロードします。インストーラをダウンロードし、全てデフォルトのままインストールします。
インストールが終了したら、Windowsの場合、スタートメニューから、"Node.js command prompt" を選択して、以下のコマンドを入力し、npmのバージョンが表示されたらOKです。Macの場合は、Terminalからコマンドを入力してください。

> npm -version

バージョンが表示されたら、OKです。

6.14.6

2. Vue ＋ Vue CLIのインストール

次にVueをダウンロードしてインストールします。Windows10環境の場合、"Node.js command prompt"から以下のコマンドを入力します。
Macの場合は、Terminalから同じコマンドを入力します。Macの場合は、セキュリティの関係でsudoを付けてコマンドを実行しないとエラーが表示されることがあります。その場合は、"Vue-CLIのインストール方法（Mac版）"を参照ください。

インターネットへの接続にプロキシサーバが設置されている場合は、npmにプロキシの設定が必要となるので注意が必要です。
インストール後にバージョンを表示して確認します。

> npm install -g vue
> npm install -g @vue/cli
> vue --version

バージョンが表示されます。

@vue/cli 4.5.6

Vueでプロジェクトを作成

以上で開発環境のインストールは終了です。
では、ここから実際にVueのアプリケーション（テンプレート）の作成に入ります。
アプリケーションを保存するためのに、適当なディレクトリを作成します。ここでは、ホームディレクトリに testというディレクトリを作成し、そのディレクトリに移動して作業をしますが、作成する作業ディレクトリはどこにおいても構いません。

> mkdir test
> cd test

testディレクトリの下に、test001という最初のアプリケーションを作成します。以下のコマンドで、test001というディレクトリが作成され、関係するファイルは、全てtest001のディレクトリの下に作成されます。

> vue create test001

プロジェクトの作成方法の選択画面が表示されます。

Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features

Defaultを選択してreturnを押します。そうすると、必要なモジュールのダウンロードが始まり、最後に以下のように表示されたら、プロジェクトの作成は成功です。

...
🎉  Successfully created project test001.
👉  Get started with the following commands:
 $ cd test001
 $ npm run serve

表示されている通り、コマンドプロンプトあるいはTerminalから以下のコマンドを入力します。

> cd test001
> npm run serve

これで、ローカルで開発用のサーバが起動します。起動したら、ブラウザから、localhost:8080にアクセスして確認します。

上記のVueのページが表示されたら成功です。
ローカルのPC上でWebサーバが起動しているだけなので、インターネットからはアクセスできません。

Vuetify

次に、UIライブラリのVuetifyを組み込んでみます。Vuetifyの組み込み方は、Vueのプロジェクトを作ってから、そのプロジェクトに対して、VueCLIを使ってVuetifyのライブラリを追加する、という方法になります。

まず、新しいプロジェクト test002 を作成し、その ディレクトリに移動してから vuetifyを追加します。

> cd ..　（testディレクトリに移動します）
> vue create test002　（test002というディレクトリが作成されVueのテンプレートが作成されます）
> cd test002　（test002に移動します）
> vue add vuetify

vuetifyがインストールされた後、設定の選択をします。

...
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  Configure (advanced) 

ここでは、Defaultを選択して、returnを押します。
ライブラリのダウンロードが始まり、最後に以下のようなメッセージが出力されたらOKです。

...
✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

今は、作業ディレクトリが、test002のプロジェクトになっているはずなので、そのままローカルで開発用のWebサーバを起動します。

> npm run serve

localhost:8080にアクセスして確認します。今度は、以下のようにVuetifyの画面が表示されたら成功です。

まとめ

VueとVuetifyで、アプリケーションの開発環境の作成ができました。
次は、Visual Studio Code上でVueのプログラムを作成しながら、Vuetifyで何ができるかを見てみたいと思います。

（おまけ）Vue CLIについて

Vue CLIを使わなくても、他のJavascriptライブラリと同様に、<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>として読み込めば、Vueを使うことができ、覚えることが少ないので、私も最初はそこから始めました。ところが、ネットでの情報はCLIベースのインストールと、.vue の単一ファイルコンポーネントを前提とした説明の方が多くて、つまづいてしまいました。なので、最初からCLIと.vueファイル（単一ファイルコンポーネント）で学習を始めた方がスムーズだと私は思います。

（おまけ２）Vuetifyについて

Vuetifyは、いきなりモダンな感じのマテリアルデザインUIのアプリケーションが簡単に作れるUIライブラリです。プリミティブなVueだけでアプリケーションを開発することもできますが、Vuetifyを使えば、レスポンシブUIを実現するためのグリッドシステムや、ローディング中のプログレスバーを追加したり、テキストフィールドにアイコンを追加したり、ということが、Vuetifyだけで簡単にできてしまいます。
Vuetifyで実現されている範囲と、Vueでできることの範囲が分かりにくいと思うので、疑問に感じたら、それぞれのガイド（Vueガイド, Vuetifyガイド）を確認するのが良いかと思います。