…文章介绍

在我们进行项目开发时无论是声明响应式数据使用的ref、reactive或是各种生命周期又或是computed、watch、watchEffect、provide-inject。

这些都需要前置引入才能使用

import

除了以上这些功能相关的模块外我们还会涉及到对组件的引用比如熟知的新建一个项目都会有这两个文件App.vue

HelloWorld.vue也会在App.vue中看到以下代码

import

这里只是导入了一个组件如果一个页面由多个组件构成那将会有很多个

import

现在有两个兄弟可以帮助我们完成自动化引入无论是上述说的功能模块

unplugin-auto-import可按需自动导入模块譬如上述的ref、watch等

unplugin-vue-components自动导入vue的非插件组件譬如上述的HelloWorld

不知道大家有没有使用过Element也就是ElementPlus在它的按需导入中有这样的说明

插件介绍

在npm的介绍中还可以看到它对于UI组件库的支持范围还是很广泛的

这里我采用pnpm作为包管理工具大家可以根据自己的情况来调整安装方式

pnpm

除了安装这两个插件之外为了更好的演示组件的免导入我这里安装Element

pnpm

我的项目是vite构建所以对应的项目构建配置文件是vite.config.ts

为方便管理插件配置我通常会把插件配置写到一个单独的文件中再到vite.config.ts中引入大家可以直接写到配置文件中。

因为要用Element组件库做组件免导入的演示所以下面配置了ElementPlusResolver相关代码这块代码大家在Element的按需导入说明中可以看到其他配置可以从npm依赖介绍中查看。

import

unplugin-vue-components/resolvers;export

function

会在根中生成该文件——记录自动导入了哪些模块}),Components({dirs:

[src],dts:

会在根中生成该文件——记录自动导入了哪些组件resolvers:

}),];

打开自动生成的auto-components.d.ts后可以看到

HelloWorld