Vue3

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

%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用のプラグインを追加インストールします。

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

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

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ファイルを新規追加します。
中身は下記の通りです。

src/App.jsx

import { defineComponent } from 'vue';

export default defineComponent({
    setup() {
        return()=>{
            return <div>Hello Vue3 Jsx</div>;
        }
    }
})

main.js修正、App.vueはもう使わないので、削除しましょう。

main.js

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

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

修正完了後、サーバーを起動して、確認します。

% yarn dev

Vue2

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

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

% 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のためのプラグインをインストールします。

% yarn add vite-plugin-vue2 -D

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

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を修正します。

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を作成します、中身は以下になります。

src/App.vue

<template>
    <div>Hello Vite Vue2</div>
</template>

最後はmain.jsを下記の内容に変更します。

src/main.js

import Vue from 'vue';
import App from './App.vue';

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

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

% yarn dev

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

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

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

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

React

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

% 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してパッケージインストールして使用可能です。

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

Vue3

Vue3でjsxを使用する場合

Vue2

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

React