vite + vue3 + typescriptでgithub pagesにサイトを公開しよう

## 0 環境
Mac OS Catalina
node.js v14.15.1
yarn    v1.22.10

## 1 プロジェクト作成
1. `yarn create @vitejs/app プロジェクト名`後にvue-tsを選択
![スクリーンショット 2021-02-21 22.41.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/e8b97a3c-6706-3ba8-4aa9-45917d52b248.png)

2. プロジェクトに移動後、`yarn install`

3. `yarn install vue-router@4`
4. `mkdir public/img`
5. `mkdir src/views`
6. `mkdir src/router`
7. `touch src/router/index.ts`
8. `touch src/views/Home.vue src/views/About.vue`
9. ` touch public/.nojekyll`
10. script一部書き換え(dev, buildにモード追加)
    (viteはトランスパイルは行うけど、型チェックは行わないようので`tsc --noEmit`を追加)

 ```json:package.json
  ...
  "scripts": {
    "dev": "tsc --noEmit && vite --mode=development",
    "build": "tsc --noEmit && vite build --mode=production",
    "serve": "vite preview"
  },
 ...
 ```

**ここまででこうなっていたらOK**
![スクリーンショット 2021-02-21 23.54.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/9f7d646f-2af2-942e-4f42-eb9757a0f9f2.png)



![スクリーンショット 2021-02-22 0.15.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/9c6b6471-e371-47e5-5763-afd3f43fd38f.png)


## 2 routerの設定
1. 基本的にvue-cliで作るvue3と変わりませんが、**createWebHistory**に渡す引数だけwebpackとは別のものになります。

    ```typescript:src/router/index.ts
    import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
    import Home from '../views/Home.vue';
    import About from '../views/About.vue';

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

    const router = createRouter({
      // viteの環境変数 => (vite.config.tsのbase)
      history: createWebHistory(import.meta.env.BASE_URL),
      routes
    });

    export default router;
    ```

2. main.tsにrouterを追加します。

    ```typescript:src/main.ts
    import { createApp } from 'vue';
    import App from './App.vue';
    // 追加↓
    import router from './router';
　　 
    // use(router) 追加
    createApp(App).use(router).mount('#app');
    ```

## 3 vite.config.ts設定
`@/`によるimportとbuild時の設定を行います。
<details><summary>※ processで型がないって言われた場合</summary><div>

`yarn add @types/node --dev`をした後、
tsconfig.jsonのtypesに`@types/node`を追加

```json:tsconfig.json
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "types": ["vite/client", "@types/node"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
```
</div></details>

```typescript:vite.config.ts
import path from 'path';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  // 本番時はgithubリポジトリをルートパスにする
  base: process.env.NODE_ENV === 'production' ? '/vite-sample/' : './',
  resolve: {
    // @/ によるimportをできるようにする。
    alias: {
      '@': path.resolve('__dirname', '/src')
    }
  },
  build: {
    outDir: 'docs'
  },
  plugins: [vue()]
});

```

## 4 viewをいじる
`<HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />`を切り取って代わりに、ルーティング関連のものを入れます。

```vue:src/App.vue
<template>
 <img alt="Vue logo" src="./assets/logo.png" />
 <!--追加↓-->
 <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
 </div>
 <!--ctrl + X↓-->
 <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
 <!--追加↓-->
 <router-view />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// ctrl + X↓
import HelloWorld from './components/HelloWorld.vue';

export default defineComponent({
  name: 'App',
　// ctrl + X↓
  components: {
    HelloWorld
  }
})
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* 追加 */
#nav {
  padding: 10px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

```

切り取ったものをHome.vueに貼り付け

```vue:src/views/Home.vue
<template>
  <!--App.vueのものを貼り付け-->
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// App.vueのものを貼り付け(エリアス効くか試すのもアリ)
import HelloWorld from '@/components/HelloWorld.vue'

export default defineComponent({
  name: 'Home',
  // App.vueのものを貼り付け
  components: {
    HelloWorld
  }
});
</script>

<style scoped></style>
```

Aboutも最低限わかるようにh1を設定

```vue:src/views/About.vue
<template>
  <h1>About</h1>
</template>

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

export default defineComponent({
  name: 'About',
});
</script>

<style scoped></style>
```

これで下準備は完了です。

## 5 ローカルで確認

`yarn dev`後に`http://localhost:3000`を確認してください。

![スクリーンショット 2021-02-21 23.58.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/7d77ca3d-7a6f-feac-9417-b7c2801dc5a1.png)


## 6 デプロイ

`yarn build`

build後に生成されるフォルダをdocsにしたので、あとはビルド、push後にgithab pagesの設定でdcosを指定することで、反映されます。

![スクリーンショット 2021-02-22 0.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252811/27df27da-6f9c-6fda-9d0b-ef295be94326.png)


お疲れ様でした。

https://taka1156.github.io/vite-sample-vue/

[リポジトリ](https://github.com/taka1156/vite-sample-vue)

※以降は通常のvue開発と変わりませんが
requireが、使えないので画像などはpublicに作ったimgフォルダに入れて、staticフォルダのように使う必要がありそうです。(ここら辺は調べ中)


### おまけ
https://gist.github.com/taka1156/862cc1860c55d5c00a13efbc0e58fefd
` <vue-ts> `と入力するとdefineComponentとかが一瞬で出てくるスニペット