vueuse 怎么在 vite 项目中使用

Vue.use()在Vite项目中使用VueUse库（如@vueuse/core）的步骤如下：

1. **安装依赖**：首先确保已在项目根目录运行过`npm install`或`yarn add`命令，并添加`@vueuse/core`到`dependencies`或`devDependencies`中，例如：

   npm install @vueuse/core --save

2. **全局引入**：如果你想在整个项目中使用VueUse的功能，可以在项目的`main.ts`或`vite.config.js`中引入。如果你选择后者，因为Vite会自动处理ESM模块，可以这样做：

   import { use } from '@vueuse/core';
   
   // 在vite.config.js中
   export default {
     plugins: [
       {
         create: () => ({
           apply: (compiler) => {
             compiler.hooks.emit.tap('vueuse', (compilation) => {
               compilation.chunks.forEach((chunk) => chunk.insertAsset('entrypoint.js', new RawSource(`
                 window.vueuse = ${JSON.stringify({ use })};
               `));
             });
           },
         }),
       },
     ],
   };

这样，`window.vueuse`将会包含`use`函数供所有组件访问。

3. **在组件内使用**：在你的Vue组件里，可以直接使用`use`函数，就像在Vue应用中一样：

   <script setup>
     const counter = useCounter(); // 使用来自@vueuse/core的counter插件
     console.log(counter.value);
   </script>

请注意，这步仅适用于希望在整个项目全局范围内使用VueUse的情况。如果只是想在一个特定的部分使用，你可以在那些部分导入并使用。