Vue3 でダッシュボードのスケルトンを作る。

# Vue3 がリリースされました。

売りである`Composition API`はだいぶいい感じです。
`Vue2`に比べて学習コストがかなり低そうです。

`Vue3`そのものについては他所でたくさん説明されるでしょうから、この記事では実際に`Vue3`の大きな使われ方と思われるダッシュボードのスケルトンを`Vue CLI`を使って作る手順をご紹介します。

また`Composition API`もさらっと使ってみます。

できあがるのは以下のようなものです。ナビゲーションバーの`Home`,`About`でメインコンテンツが切り替わり、左上のハンバーガーボタンでナビゲーションバーの幅が変化します。


![スクリーンショット 2020-09-21 4.18.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73493/1db018d3-9bcc-6235-14e7-9e0ee6a5afe8.png)



# 準備

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

9/20現在インストールされるバージョンは`4.5.6`です。この記事もそのバージョンで確認しています。

#### プロジェクトを作成します。

```sh
vue create dashboard
```

プロジェクト名（`dashboard`）は任意のものでかまいません。

以下のようにオプションが表示されます。

```
Vue CLI v4.5.6
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
❯ Manually select features 
```

`vue-router`を使うので`Manually select features`を選択してください。

```
Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
❯◉ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
```

Router を選択します。

```
Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 
  2.x 
❯ 3.x (Preview) 
```

この後の質問はデフォルトを選択しておけばいいです。

#### サービスを開始します。

```
cd dashboard
yarn serve
```

#### ブラウザで`localhost:8080`に繋ぎます。

# 作っていく

この時点でプロジェクトフォルダの中の`public`と`src`は以下のような中身になっています。この中の`public/index.html`と`src/App.vue`を変更していきます。

```
public
├── favicon.ico
└── index.html
src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
├── router
│   └── index.js
└── views
    ├── About.vue
    └── Home.vue
```

#### html, body, #app にスタイルを充てる

全画面を使うために、`public/index.html`に`css`を追記して高さを調整します。

```css
<style>
html, body, #app {
;	height: 100%
;	margin: 0
}
</style>
```

#### 聖杯レイアウトを作成する。

`App.vue`を編集して[聖杯レイアウト](https://qiita.com/Satachito/items/872a877b85b1ce613c97)にします。

```src/App.vue
<template>
	<div id=HG>
		<header><div @click="toggleNav()">☰</div></header>
		<nav>
			<router-link to="/">Home</router-link><br>
			<router-link to="/about">About</router-link><br>
		</nav>
		<router-view/>
		<aside>ASIDE</aside>
		<footer>{{ shrink }}</footer>
	</div>
</template>

<script>
import { ref } from 'vue'
export default {
	setup() {
		const shrink = ref( false )
		return {
			shrink
		,	toggleNav	: () => {
				document.querySelector( 'nav' ).style.width = shrink.value ? '200px' : '100px'
				shrink.value = !shrink.value
			}
		}
	}
}
</script>

<style>
#HG {
;	height					: 100%
;	display					: grid
;	grid-template-rows		: 32px 1fr 32px
;	grid-template-columns	: auto 1fr auto
}
nav, aside {
;	width					: 200px
;	background				: lightgreen
;	transition				: all 300ms 0s ease
}
header, footer {
;	grid-column             : 1 / 4
;	background				: pink
}
</style>
```

#### Composition-API 

上のソースの`script`タグの中で`Composition-API`を使用しています。
`setup()`が返す辞書が`template`の中で`{{}}`とか`@click`とかから参照できるようになります。

# 最後に

`Composition-API`は`Vue2`時代の指定方法より直感的で学習コストを下げることに成功していると思われます。積極的に`Vue3`に乗り換えていっていいんじゃないでしょうか。