vueを一部だけ使いたい

• @vitejs/plugin-vue、@vitejs/plugin-vue-jsxをインストールする npm i xxxxxx

• vite.config.ts に以下を加える

import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

(中略）

    plugins: [
        vue(),
        vueJsx({
            // options are passed on to @vue/babel-plugin-jsx
        }),     
    ],

    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },

• tsconfig.json に以下を加える

  // このあたりのパスは各環境によります
  "include": [
    "shims-vue.d.ts",
    "src/**/*", 
    "src/**/*.vue"
  ],
  "paths": { "@/*":["./src/*"] },  
  "vueCompilerOptions": {
    "target": 3.3
  }  

• shims-vue.d.ts を作成（たぶんts名は何でもいいです。↑のincludeにその名前を指定したらいいだけかと） 中身は以下です

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}

• index.htmlにvueのルートコンポーネントを追加(idは何でもOKです）

  <div id="app-vue">
  </div>

• vueコンポーネント作成 例）App.vue

<script setup>
import { ref, onMounted } from 'vue'

// リアクティブな状態
const count = ref(0)

// 状態を変更し、更新をトリガーする関数。
function increment() {
  count.value++
}

// ライフサイクルフック
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count33 is: {{ count }}</button>
</template >

• メインとなるtsでvueコンポーネント作成 例）main.ts

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

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

参考

Fix `Configure your bundler to alias 'vue'` in Vite.js

vue.js - TypeScript 'cannot find module...' in Vue project - Stack Overflow