（１）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を[ダウンロード](https://nodejs.org/ja/download/ "Node.jsをダウンロード")します。インストーラをダウンロードし、全てデフォルトのままインストールします。
インストールが終了したら、Windowsの場合、スタートメニューから、"Node.js command prompt" を選択して、以下のコマンドを入力し、npmのバージョンが表示されたらOKです。Macの場合は、Terminalからコマンドを入力してください。


```> npm -version```

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

```
6.14.6
```

![npmのバージョン確認](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69430/ef451921-5a49-2cdc-7d0a-d3fa14861388.png "npmのバージョン確認")


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

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

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

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

```
@vue/cli 4.5.6
```


![Vueのバージョン確認](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69430/5ca94d6f-995e-5247-2972-2243a8f2ff06.png "Vueのバージョン確認")

#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_index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69430/86547e3b-695f-724b-36b2-bf643728fe27.png)

上記の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の画面が表示されたら成功です。

![Vuetifyページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69430/07e34551-51d4-27e4-6a43-f6925db23c83.png "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ガイド](https://jp.vuejs.org/v2/guide/ "Vue guide"), [Vuetifyガイド](https://vuetifyjs.com/en/ "vuetify guide")）を確認するのが良いかと思います。