自动引入神器unplugin-auto-import，和满屏的import说拜拜

目录

• 简介
• 功能
• 安装
• 在 Vite 中使用
• 在 Webpack 中使用
• 配置选项

简介

unplugin-auto-import 是一个现代的自动导入插件，它支持多种构建工具（例如 Vite 和 Webpack），可以根据你在代码中使用的标识符自动生成相应的 import 语句，从而减少重复代码，简化开发过程。

官方仓库

功能

• 自动导入常用库的 API，如 vue、vue-router、@vueuse/core 等。
• 支持自定义目录中的函数自动导入。
• 生成类型声明文件（适用于 TypeScript）。
• 生成 ESLint 配置文件，避免未定义变量错误。

安装

可以使用 npm 或 yarn 安装 unplugin-auto-import。

# npm
npm install unplugin-auto-import# yarn
yarn add unplugin-auto-import

在 Vite 中使用

1. 安装插件
   安装 unplugin-auto-import 插件：

npm install unplugin-auto-import

2. 配置插件
   在 vite.config.ts 文件中添加 unplugin-auto-import 配置：

// vite.config.tsimport { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";export default defineConfig({plugins: [vue(),AutoImport({imports: ["vue", "vue-router", "@vueuse/core"],dirs: ["./src/composables", "./src/utils"],dts: "./src/auto-imports.d.ts",eslintrc: {enabled: true,filepath: "./.eslintrc-auto-import.json",globalsPropValue: true,},}),],
});

3. 示例代码
   配置后，你可以直接在组件中使用 vue、vue-router 等库的 API，而无需手动 import：

<!-- src/components/ExampleComponent.vue --><template><div>{{ message }}</div><button @click="updateMessage">Update</button>
</template><script setup>
const message = ref("Hello, Vite!");
const updateMessage = () => {message.value = "Updated Message!";
};
</script>

在 Webpack 中使用

1. 安装插件
   安装 unplugin-auto-import 和 @unplugin/webpack：

npm install unplugin-auto-import @unplugin/webpack

2. 配置插件
   在 webpack.config.js 中配置 unplugin-auto-import 插件：

// webpack.config.jsconst AutoImport = require("unplugin-auto-import/webpack");
const path = require("path");module.exports = {// 其他配置plugins: [AutoImport({imports: ["vue", "vue-router", "@vueuse/core"],dirs: [path.resolve(__dirname, "./src/composables"),path.resolve(__dirname, "./src/utils"),],dts: path.resolve(__dirname, "./src/auto-imports.d.ts"),eslintrc: {enabled: true,filepath: path.resolve(__dirname, "./.eslintrc-auto-import.json"),globalsPropValue: true,},}),],
};

3. 示例代码
   在使用了自动导入功能后，你可以在组件中直接使用 API：

// src/main.jsimport { createApp } from "vue";
import App from "./App.vue";
import router from "./router";const app = createApp(App);
app.use(router);
app.mount("#app");

配置选项

unplugin-auto-import 提供了丰富的配置选项：

• **imports**: 自动导入的库列表。
• **dirs**: 自动导入的目录列表。
• **dts**: 生成的类型声明文件路径。
• **eslintrc**: 生成的 ESLint 配置文件选项。

示例配置

AutoImport({imports: ["vue", "vue-router", "@vueuse/core"],dirs: ["./src/composables", "./src/utils"],dts: "./src/auto-imports.d.ts",eslintrc: {enabled: true,filepath: "./.eslintrc-auto-import.json",globalsPropValue: true,},
});

• imports: 你希望自动导入的库，如 vue、vue-router、@vueuse/core 等。
• dirs: 包含你项目中自定义模块的目录。
• dts: 如果你使用 TypeScript，这会生成一个 .d.ts 文件，用于自动导入的类型声明。
• eslintrc: 配置 ESLint，避免因自动导入导致的未定义变量错误。

结论

通过 unplugin-auto-import，你可以显著简化项目中的 import 管理，提升开发效率。无论是 Vite 还是 Webpack，配置都十分简单并且灵活，可以根据具体需求进行定制。