Vue3.0 初期設定

[jiyuujin]

概要

Vue 2.x と比べがらっと変わる！

yarn add vue@next vue-router@next
yarn add @vue/test-utils@next vue-cli-plugin-vue-next -D

エントリーポイントの作成

import { createApp } from 'vue'
import App from './App'

// `vue-router` を使う場合
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

vue-router 初期設定

import { createRouter, createWebHistory } from 'vue-router'

import HelloWorld from '../components/HelloWorld'

const routes = [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }
]

const router = createRouter({
  history: createWebHistory(),
  linkActiveClass: 'active',
  routes
})

export default router

[jiyuujin]

Announce is out

https://github.com/vuejs/rfcs/issues/183

[jiyuujin]

rc is out

https://github.com/vuejs/rfcs/issues/189

Experimental

• <Suspense>
• <script setup>
• <style vars>

[jiyuujin]

You can confirm in https://github.com/jiyuujin/vue3-boilerplate/pull/4 exclude unit test

[jiyuujin]

Wait for @storybook/vue@6.1

• https://github.com/jiyuujin/j-stylebook/issues/2
• https://github.com/jiyuujin/picker-plugins/issues/99