vite vue自动加载api（再也不用每个文件引入ref、reactive、vue-router）

在Vue项目中，如果你想要自动引入Vue的响应式API（如ref、reactive等），可以使用Vite的插件来实现。以下是一个简单的例子，展示了如何创建一个Vite插件来自动引入Vue的响应式系统。

首先，你需要安装Vue和Vite：

npm install vue
npm install -D vite

然后，创建一个Vite插件：

// vite-plugin-auto-vue-api.js
import { createApp, ref, reactive } from 'vue';
 
export default function () {
  return {
    apply: 'build',
    resolveId(source) {
      if (source === 'vue') {
        return source;
      }
    },
    load(id) {
      if (id === 'vue') {
        return `
          import { createApp, ref, reactive } from 'vue';
          export { createApp, ref, reactive };
        `;
      }
    },
  };
}

接着，在Vite配置文件中引入并使用这个插件：

// vite.config.js
import vue from '@vitejs/plugin-vue';
import autoVueApiPlugin from './vite-plugin-auto-vue-api';
 
export default {
  plugins: [
    vue(),
    autoVueApiPlugin()
  ]
};

现在，在你的Vue组件中，你可以直接使用ref和reactive，无需显式引入它们：

<script setup>
import { ref, reactive } from 'vue';
 
const count = ref(0);
const state = reactive({ count });
</script>

这个插件会在构建时自动引入Vue的响应式API，并使其在每个文件中可用，从而简化了你的代码并提高了开发效率。