Viteの各プロジェクトの初期化まとめ、Vue2、Vue3、React

# Vue3

Vue3はデフォルトのテンプレートから選べます。

```shell
%yarn create vite
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@2.8.0" with binaries:
      - create-vite
      - cva
✔ Project name: … vue3-project
✔ Select a framework: › vue
✔ Select a variant: › vue

Scaffolding project in /Users/den/react_project/vite_project/vue3-project...

Done. Now run:

  cd vue3-project
  yarn
  yarn dev

✨  Done in 11.47s.
```

初期化完了後、`yarn`してパッケージインストールすれば使用できます。

### Vue3でjsxを使用する場合

初期化は上記と同じです。
jsx用のプラグインを追加インストールします。

```shell
% yarn add @vitejs/plugin-vue-jsx -D 
```

`vite.config.js`にそのプラグインを追加します。

```javascript:vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';

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

```


完了後、`src`フォルダの配下に`App.jsx`ファイルを新規追加します。
中身は下記の通りです。

```javascript: src/App.jsx
import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
        return()=>{
            return <div>Hello Vue3 Jsx</div>;
        }
    }
})
```
`main.js`修正、`App.vue`はもう使わないので、削除しましょう。

```javascript:main.js
import { createApp } from 'vue'
import App from './App'

createApp(App).mount('#app')
```
修正完了後、サーバーを起動して、確認します。

```
% yarn dev
```

![6F7B23B2-8D69-4150-9F1C-DF465B81F00E_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/095d960b-9db5-8326-cc27-cf71f7e4799d.jpeg)



# Vue2
ViteデフォルトではVue2をサポートしてませんが、外部のプラグインは用意されてます。
公式ドキュメント: https://vitejs.dev/guide/features.html#vue
リポジトリ: https://github.com/underfin/vite-plugin-vue2

プロジェクト初期化します。
ここでは`vanilla`:point_up_tone1:を選びます、素のjsプロジェクトとして初期化します。

```shell
% yarn create vite
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@2.8.0" with binaries:
      - create-vite
      - cva
✔ Project name: … vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit
    svelte
```

初期化完了後のファイル構成は以下になります。
手動で`vite.config.js`を作成する必要があります。
```
|-- vite-project
|--|-- .gitignore
|--|-- favicon.svg
|--|-- index.html
|--|-- main.js
|--|-- package.json
|--|-- style.css
|--|-- vite.config.js
```

vue2のためのプラグインをインストールします。

```shell
% yarn add vite-plugin-vue2 -D 
```

インストール完了後、`vite.config.js`に下記の内容を追加します。

```javascript:vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2';

export default {
    plugins: [createVuePlugin()],
};
```

追加完了後、`vue2`と `vue-template-compiler`をインストールします。

```
% yarn add vue@2.6.14 -S
% yarn add vue-template-compiler
```

インストール終了後、`main.js`と同じ階層で`src`フォルダを作ります。
その後、`main.js`を`src`フォルダに移動します。
移動完了後、`index.html`を修正します。

```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

`src`フォルダに`App.vue`を作成します、中身は以下になります。

```vue:src/App.vue
<template>
    <div>Hello Vite Vue2</div>
</template>
```
最後は`main.js`を下記の内容に変更します。

```js:src/main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: (h) => h(App),
}).$mount();
```

最後、サーバー立ち上げます。

```
% yarn dev
```

![5103EB95-8A18-4B12-A9CC-98A345F5CE4D_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320164/15fcc0b7-84c7-19c5-83ed-76e00b421c11.jpeg)

### コミュニティテンプレート使ってVue2を初期化

外部プラグイン以外にも、コミュニティテンプレート使用して、初期化できます。

doc: https://vitejs.dev/plugins/#vitejs-plugin-vue-jsx
リポジトリ: https://github.com/vitejs/awesome-vite#plugins

ローカルにチェックアウトすれば使用できます。

# React

デフォルトサポートしてるため、特に変わった操作する必要はありません。

```shell
% yarn create vite            
yarn create v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite@2.8.0" with binaries:
      - create-vite
      - cva
✔ Project name: … vite-project
✔ Select a framework: › react
✔ Select a variant: › react

Scaffolding project in /Users/den/react_project/vite_project/vite-project...

Done. Now run:

  cd vite-project
  yarn
  yarn dev

✨  Done in 8.51s.
```

`yarn`してパッケージインストールして使用可能です。