高速なbuild tool,viteを使ってvuejsの開発をはじめよう

まえおき
-
vue-cliの代替品であるところのviteです
もちろん、これは完全な代替品というわけではないでしょうが、十分な機能を備えている上に、なにより起動が高速である(遅延トランスパイルなどを実施しているのでしょう)

開発環境をかえるのはなかなか精神的にも大変ですが使ってみるだけのことはあります。是非つかってみてください
この記事はviteをつかう最初のステップについて記述してあります

使い方などはこちらとかを参照してください
https://ja.vitejs.dev/
(実際のところ、こちらの記事を読めば十分です。この記事はいりません)

まとめると
- 遅延コンパイルを使用している
- JavaScriptではなくGoをベースにして書かれている
といったあたり(特に前者)によって大幅な高速化を実現しています

ベンチマークなどを測定する必要がないほどに起動が速いです(1秒以内)

正直、これはもう使用しない理由はないですね


では手順や使用感についてみていきましょう


導入
-
環境
- node 16.0.0
- yarn 1.22.19

```bash
$ yarn create vite vite-first
```
単純にこれだけのコマンドでtemplateが生成されます
途中で生成するものを聞かれるので、vue,vue-tsを指定します
今回project名はvite-firstで生成しているので、そこは任意のプロジェクト名を指定してください
jsでつくりたい人、まだいるのでしょうがそういう人はがんばってくださいね、としか。。。


projectの生成時点での構成は下記のとおりとなります
```
.
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

```

続いて
```bash
$ cd vite-first
$ yarn
$ yarn dev
```
これでvue-cliでいうところのyarn serveを実行したところまでできたことになります
yarnの引数は若干ちがいますのでpackage.jsonを確認しましょう
簡単でしょ?


vueのversion
-
選択の余地なくvue3がインストールされます
よかったですね

- package.json
```json
{
  "name": "vite-first",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.3",
    "typescript": "^4.6.4",
    "vite": "^3.0.7",
    "vue-tsc": "^0.39.5"
  }
}
```

追加の設定
-
ここまででも十分なのですが、追加の設定をしましょう
vue-cliでは対話的にvue-routerやvuexをいれてくれますが、viteではそれはないので、両方ともいれてしまいましょう
(それぞれのpathはsrc以下のもの)

vue-router
--
```bash
$ yarn add vue-router@next
```

### router/index.ts
```
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

```
router/index.tsについていえば、いつかどこかでつくったやつをそのままいれればよいです



### App.vue
App.vueはデフォルトではおもいっきりレンダリングするコードにになってると思うので、router-viewタグになおしましょう
```vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

<template>
  <router-view/>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

```


### views/Home.vue
ないですね、でっちあげてしまいましょう
```vue
<template>
<h1>home</h1>
</template>
```

### main.ts
最後にrouterを読みこませます
```
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

createApp(App)
.use(router)
.mount('#app')

```
routerをuseするようにしておきましょう


### 実行
```bash
$ yarn dev
```


vuex
--
ついでにvuexを追加しておきましょう
```bash
$ yarn add vuex@next
```

### store/index.ts
```
import { createStore } from "vuex";

export default createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
});

```

### main.ts
```
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App)
.use(router)
.use(store)
.mount('#app')

```

こんな感じで動くのではないでしょうか

設定
-
port番号とかのデフォルトが5127だったりするので、それが気持わるい人はvite.config.jsで変更できます
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080
  }
})

```
上記のように書きかえればport 8080で動くようになります

その他の設定もコードのコメントにあるように
https://vitejs.dev/config/
を参考にして記述すれば大丈夫です。

まとめ
-
vue-cliに比べて圧倒的に起動時間も速いですし、コンパイルを遅延させてるのも実際に動作させるというほど影響はありません
リズムよく開発できるのも含めていいところしかないので、もうとっとと乗り換えしてしまうのがよいでしょう

今回のコードについては
https://github.com/generosennin/vite-first
にいれておくので、気になる方は参照してみてください