はじめに
非常に基本的な手順なのですが、なかなかそのものズバリを見つけられなかったので自分で書きました。
そもそも弊社でももう Vue3 に移行して久しいので、新規で Vue2.x のプロジェクトを立ち上げることはほぼありません。にも関わらずこの記事を書いたのは、既存 のVue2 プロジェクトを Vue3 に移行する際に Vue2 の段階で vite に移行しておいたほうが Vue3 への移行がスムーズではないかと思ったからです。そのためには素の Vue2.7+Vite のプロジェクトを新規作成し、ファイルの比較を行いながら移行した方が良いと思いました。
そのため、ここでは「VueCLI で Vue2.7 プロジェクトを作ってからそれを Vite 化する」のではなく、「Vite プロジェクトを作って、それをVue2.7 化する」という手順にしました。その方がクリーンな状態を見れるからです。VueCLI のプロジェクトを Vite 化する方法はたくさん見つかりますが、ゴミがたくさん残って捨てるのに困ると思います。なのでクリーンな状態を作っておくことで最終的に目指す形を確認できるというのが重要だと思いました。
手順
Vite プロジェクトを作成します。
$ npm init vite
? Project name: » vite-project
? Select a framework: » - Use arrow-keys. Return to submit.
> Vanilla
Vue
React
Preact
Lit
Svelte
Others
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
注意点として、Select a framework: で "Vue" を選んでしまうと Vue3.x が入ってしまいます。ここでは Vue.2.7 を使いたいので "Vanilla" を選びあとから Vue2 を入れます。
Vite サンプル画面の表示確認
cd vite-project
npm install
npm run dev
http://localhost:5173/ にアクセスし、以下のような Vite のサンプルページが表示されることを確認します。
Vue2.7 化
Vue2 のインストール
npm install vue@2.7.14
npm install -D vite
npm install -D @vitejs/plugin-vue2
vite.config.js の作成
touch vite.config.js
vite.config.js ファイルの中身は plugin-vue2 の公式リポジトリのドキュメント通りにします。
https://github.com/vitejs/vite-plugin-vue2
// vite.config.js
import vue from '@vitejs/plugin-vue2'
export default {
plugins: [vue()]
}
サンプルソースを Vue で書き直す
このまま実行しても相変わらず Vite のサンプルが表示されるだけなので、以下のように書き換えます。
import Vue from 'vue/dist/vue.esm';
new Vue({
el: '#app',
data: {
message: 'Hello World'
},
template: `<div>{{message}}</div>`,
})
これで実行します。
npm run dev
以下のような簡素な Hello World が表示されればOKです。
以上になります。