Vue.js3 β版をvue-cliから初めてみる

# 環境

- macOS Mojave
- Node.js 14.4.0
- yarn 1.22.4


## yarnのインストール

```console
$ npm uninstall yarn -g
$ npm install yarn -g
```

## vue/cliのインストール

```console
$ yarn global add @vue/cli
```

## vue３プロジェクトの作成

```console
$ vue create vue3-project

? Please pick a preset: 
  no (node-sass, babel, typescript, router, eslint) 
  yes (node-sass, babel, typescript, router, eslint) 
  default (babel, eslint) 
❯ 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
.
.
.
.



$ cd vue3-project
```

## Vue3プラグインの追加

```
$ vue add vue-next
```

## src/router/index.tsを編集

```src/router/index.ts
// RouteConfigをRouteRecordRawに変更

import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue'

const routes: Array<RouteRecordRaw> = [
{
  path: '/',
  name: 'Home',
  component: Home
},
{
  path: '/about',
  name: 'About',
  // route level code-splitting
  // this generates a separate chunk (about.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () => import('../views/About.vue')
}
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
```

### src/shims-tsx.d.tsを削除

## src/shims-vue.d.tsを編集

```src/shims-vue.d.ts
declare module "*.vue" {
  import { defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent>;
  export default component;
}
```

### src/components/HelloWorld.vueを編集

```src/components/HelloWorld.vue
<template>
  <div class="hello">
    <p>
      For a guide and recipes on how to configure / customize this project,
      <br />check out the
      <a
        href="https://cli.vuejs.org"
        target="_blank"
        rel="noopener"
      >vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
          target="_blank"
          rel="noopener"
        >babel</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
          target="_blank"
          rel="noopener"
        >typescript</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
          target="_blank"
          rel="noopener"
        >router</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
          target="_blank"
          rel="noopener"
        >eslint</a>
      </li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li>
        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
      </li>
      <li>
        <a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a>
      </li>
      <li>
        <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a>
      </li>
      <li>
        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a>
      </li>
      <li>
        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
      </li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li>
        <a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a>
      </li>
      <li>
        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/vue-devtools#vue-devtools"
          target="_blank"
          rel="noopener"
        >vue-devtools</a>
      </li>
      <li>
        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a>
      </li>
      <li>
        <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
```

## @types/estreeをインストール

```
$ yarn add @types/estree
```

### yarn serveでVue3を起動する

```
$ yarn serve
```

[![Screenshot from Gyazo](https://gyazo.com/fbe71d25185d508ae81fbd0dbc01eb0e/raw)](https://gyazo.com/fbe71d25185d508ae81fbd0dbc01eb0e)

コンパイルエラーも警告も出ずに出れば完了

## 参考

- [vue-next（Vue.js 3.0 wip）+ TypeScript + webpackでの開発環境を構築する](https://qiita.com/ryo2132/items/2b10f03e3d4ea04be649)
- [Vue.js 3 のベータ版がリリースされたので予習してみる](https://tech.smartcamp.co.jp/entry/try-vue3-beta)
- [Install Vue 3 (Vue3) Beta with Vuex and VueRouter easily with vue-cli](https://dev.to/chenxeed/install-vue3-beta-with-vuex-and-vuerouter-easily-with-vue-cli-2h94)