Vue-cli3からのVuetifyを試す


# はじめに

VuetifyというVue.jsで使えるマテリアルデザインUIフレームワークを学んでみたいと思い、書き出してみることにしました。といいつつもVue.jsも大して理解していないため、合わせて学びを深めたいと思います。

# 利用するための準備

node.jsを準備しておきます。私の環境では「v10.15.3」がインストールされています。
[windows10でnode.jsのバージョンを切り替えて使う](https://qiita.com/satoysan/items/d88eda88b496f44823e1)

```
>node --version
v10.15.3
``` 

vue-cli3.x系を使いたいと思いますので、準備をします。
[Vue-cliインストール](https://cli.vuejs.org/guide/installation.html)

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

または

```
> yarn global add @vue/cli
```

すると、いろいろ出力されてインストールが完了するはずです。
ただ、Vue-cli2系がある場合は、先にアンインストールします。（共存する方法は別にありますが、3系で進めるため説明は省きます）

```
> npm uninstall -g vue-cli
```

インストールが完了後、バージョンを確認します。無事3.X系がインストールされています。

```
>vue --version
3.5.1
```

以上、準備は完了です。

# プロジェクトを用意する

createコマンドでプロジェクトを作成します。
実行するとsample1というディレクトリが作成されます。

```
> vue create sample1
```

インストールはマニュアルを選択します。とりあえずインストールしたいので、次のものを選択しました。

```
Vue CLI v3.5.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing
```

いろいろ、選択させられるので、次のようにしました。

```
Vue CLI v3.5.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: default
```

完了後、ディレクトリ内に移動します。

```
> cd sample1
```

## ひとまず起動してみる

devモードでの起動を次のコマンドで行います。

```
> npm run serve
```

すると次のようにアクセスするべきURLが表示するので、ブラウザでアクセスします。

```
 DONE  Compiled successfully in 3051ms
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://xxx.xxx.xxx.xxx:8080/


```

``http://localhost:8080/`` にアクセスすると無事表示されました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/59954/fffc0ad7-1c3e-95cd-00cd-f52477392990.png)

``CTRL+C``でdev起動モードを終了させておきます。

# vuetifyのインストール

ここからやっと導入です。

```
> vue add vuetify
```

どのモードでインストールする？と聞かれるのでDefaultにしました。

```
? Choose a preset: Default (recommended)
```

無事インストール完了です。

```
✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     .gitignore
     README.md
     babel.config.js
     package-lock.json
     package.json
     public/favicon.ico
     public/index.html
     src/App.vue
     src/assets/logo.png
     src/assets/logo.svg
     src/components/HelloWorld.vue
     src/main.js
     src/plugins/vuetify.js

   You should review these changes with git diff and commit them.
```

## 起動してみる

先ほどと同じようにdevモードで起動します。

```
> npm run serve
```

デザインがvuetifyに切り替わりました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/59954/12e3caca-4a13-9217-85ea-7b0c019899ff.png)

これで準備が整いました。
次回以降vuetifyの基本を理解していこうと思います。

# 参考
[vuetifyjs quick-start] (https://vuetifyjs.com/ja/getting-started/quick-start)