unplugin-auto-import是一个现代的自动导入插件,旨在简化前端开发中的导入过程,减少手动导入的繁琐工作,提升开发效率。它支持多种构建工具,包括Vite、Webpack、Rollup和esbuild,并且可以与TypeScript配合使用,提供强大的类型系统支持。支持自动导入基础库vue、react、pinia、vue router、lodash、axios等等几乎任何JavaScript库或框架中的API,只要符合JavaScript的模块规范。
功能特点
1.自动导入常用库的API:如Vue、vue-router、@vueuse/core等,减少手动导入的重复工作
2.支持自定义目录中的函数自动导入:可以在配置中指定需要自动导入的目录和文件
3.生成类型声明文件:对于使用TypeScript的项目,可以生成相应的类型声明文件,确保代码的健壮性
4.生成ESLint配置文件:避免未定义变量错误,优化代码质量
使用方法
1.安装插件:使用npm或yarn将unplugin-auto-import安装为开发依赖。
npm install unplugin-auto-import --save-dev
# 或者使用 yarn
yarn add unplugin-auto-import --dev
2.在vite.config.js或vite.config.ts配置插件:在构建工具的配置文件中添加unplugin-auto-import插件的配置。以下是一个在Vite中使用的例子:
import { defineConfig } from 'vite';
import autoImport from 'unplugin-auto-import/vite';
export default defineConfig({plugins: [autoImport({imports: ['vue'], // 自动导入vue的所有api}),],
});
如图(这里我只配置了vue,大家根据需要可添加其他库):
3.到此完成啦,这样我们开发时就不用在每个文件去引入vue的api,即可进行调用。