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にそのプラグインを追加します。
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ファイルを新規追加します。
中身は下記の通りです。
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return()=>{
return <div>Hello Vue3 Jsx</div>;
}
}
})
main.js修正、App.vueはもう使わないので、削除しましょう。
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に下記の内容を追加します。
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を修正します。
<!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を作成します、中身は以下になります。
<template>
<div>Hello Vite Vue2</div>
</template>
最後は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してパッケージインストールして使用可能です。