Vite で Vue2 のプロジェクトを作成する - 構築編

前回の記事では Vite と Vue3 を使って npmパッケージ を使えるところまで作成しましたが、どうやら Vue2 プロジェクトでは使用できないようです。今回は、Vite を使って Vue2 でライブラリビルドをできるように Vite + Vue2 の準備をしようと思います。

前回までのおさらい
新たな問題
Vite + Vanilla なプロジェクトを作成する
- 1. Vanilla な画面構築を行う
- 2. Vite + Vanilla の動作確認
Vanilla プロジェクトを Vue2 をインストールする
Vue2 に向けてコードに手を加えていく
まとめ

前回までのおさらい

Vite x Vue3でライブラリビルドができました。

前回の記事

前々回の記事

新たな問題

「Vue3 で作ったプロジェクト」 に 「Vue3 でライブラリビルドしたパッケージ」 をインポートする分には特に問題ありませんでした。

しかし、 「Vue2 ので作ったプロジェクト」 に 「Vue3 のライブラリビルドしたパッケージ」 はインポートできないっぽいことが判明しました。

コンポーネントの記述を Vue2 で記述してみたのですがダメでした。

ということで、一旦戻ります。

Vue2 でライブラリビルドしたいのよ～

Vite + Vanilla なプロジェクトを作成する

Vite で Vue2 プロジェクトを作るには、まず Vanilla なプロジェクトを作るようです。そして Vue2 をインストールして進化させていくようです。

参考サイト

これ参考になりそ～

1. Vanilla な画面構築を行う

$ npm create vite

> npx
> create-vite

✔ Project name: … hello-vue2-lib
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript

Scaffolding project in /tmp/hello-vue2-lib...

Done. Now run:

  cd hello-vue2-lib
  npm install
  npm run dev

セットアップはこんな感じで

2. Vite + Vanilla の動作確認

それっぽい画面はできた！

Vanilla プロジェクトを Vue2 をインストールする

1. Vue2 のインストール

$ yarn add vue@^2

2. Vite 用 Vue2 プラグインをインストール

github.com

$ yarn add -D @vitejs/plugin-vue2

3. vite-plugin-dts もインストールしておく

$ yarn add -D vite-plugin-dts

ビルド時に型定義が作られなくて困るからね

Vue2 に向けてコードに手を加えていく

1. main.ts を Vue2 用に変更する

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

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

2. App.vue を作成する

<template>
  <div class="app">Hello World!</div>
</template>

3. shims-vue.d.ts を作成する

このままだと App.vue のインポートでエラーになってしまうので型定義を追加します

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

4. vite.config.ts を作成する

import { defineConfig } from "vite";

import vue from "@vitejs/plugin-vue2";

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