在vue3自动导入组合式api

步骤 1：安装 unplugin-auto-import

首先，你需要安装 "unplugin-auto-import" 插件。你可以使用 npm 或 yarn 安装它

使用 npm：

npm install unplugin-auto-import --save-dev

使用 yarn：

yarn add unplugin-auto-import --dev

步骤 2：配置 Vue CLI 插件

如果你使用 Vue CLI 创建了项目，你可以在项目根目录下的 vue.config.js 中配置 "unplugin-auto-import"。以下是一个示例配置：

const { AutoImportPlugin } = require('unplugin-auto-import/vue')

module.exports = {
  // 其他配置选项...

  configureWebpack: {
    plugins: [
      AutoImportPlugin({
        imports: [
          'vue',
          'vue-router',
          // 添加其他需要自动引入的库和组件
        ],
      }),
    ],
  },
}

在上述配置中，我们导入了 "unplugin-auto-import" 的 AutoImportPlugin，并将需要自动引入的库和组件添加到 imports 数组中。你可以根据项目的需求自定义这些导入。 步骤 3：在组件中使用自动引入的库和组件

一旦配置完成，你可以在Vue组件中使用自动引入的库和组件，无需手动导入它们。例如：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

<script setup>
// 删除不必要的导入语句

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

步骤 4：运行项目

现在，你可以运行你的Vue.js项目，并确保 "unplugin-auto-import" 正确自动引入所需的库和组件。

这个插件可以帮助你减少手动导入的工作，提高项目的可维护性和性能。但请注意，根据项目的复杂性和需求，你可能需要进一步调整配置以满足特定的要求。参考 "unplugin-auto-import" 的文档以获取更多详细信息和高级配置选项。