Vue3 がリリースされました。
売りであるComposition APIはだいぶいい感じです。
Vue2に比べて学習コストがかなり低そうです。
Vue3そのものについては他所でたくさん説明されるでしょうから、この記事では実際にVue3の大きな使われ方と思われるダッシュボードのスケルトンをVue CLIを使って作る手順をご紹介します。
またComposition APIもさらっと使ってみます。
できあがるのは以下のようなものです。ナビゲーションバーのHome,Aboutでメインコンテンツが切り替わり、左上のハンバーガーボタンでナビゲーションバーの幅が変化します。
準備
npm install -g @vue/cli
9/20現在インストールされるバージョンは4.5.6です。この記事もそのバージョンで確認しています。
プロジェクトを作成します。
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を追記して高さを調整します。
<style>
html, body, #app {
; height: 100%
; margin: 0
}
</style>
聖杯レイアウトを作成する。
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に乗り換えていっていいんじゃないでしょうか。