自动导入unplugin-auto-import+unplugin-vue-components

文章介绍

接下来将会以Vite + Vue3 + TS的项目来举例实现

在我们进行项目开发时，无论是声明响应式数据使用的ref、reactive，或是各种生命周期，又或是computed、watch、watchEffect、provide-inject。这些都需要前置引入才能使用：

import { ref, reactive, onMounted, watch, provide} from 'vue'

除了以上这些功能相关的模块外，我们还会涉及到对组件的引用，比如熟知的新建一个项目都会有这两个文件：App.vue 和 HelloWorld.vue，也会在App.vue中看到以下代码：

import HelloWorld from './components/HelloWorld.vue'

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

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

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

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

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

我们要用的也就是这兄弟俩

插件介绍

安装

可以从npm看到两个依赖的一些功能介绍：

npm依赖介绍：unplugin-auto-import - npm (npmjs.com)

npm依赖介绍：unplugin-vue-components - npm (npmjs.com)

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

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

pnpm install -D unplugin-vue-components unplugin-auto-import

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

pnpm install element-plus

配置

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

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

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

// /config/plugin/index.ts
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export function vitePluginsConfig(command = 'serve') {
  return [
    vue({ include: [/\.vue$/, /\.md$/] }),
    AutoImport({
      imports: ['vue'],
      resolvers: [ElementPlusResolver()],
      dts: 'types/auto-imports.d.ts' // 会在根目录下的types目录中生成该文件——记录自动导入了哪些模块
    }),
    Components({
      dirs: ['src'],
      dts: 'types/auto-components.d.ts', // 会在根目录下的types目录中生成该文件——记录自动导入了哪些组件
      resolvers: [ElementPlusResolver()] 
    }),
  ];
}

// vite.config.ts
import { vitePluginsConfig } from './config/plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: vitePluginsConfig()
})

演示

接下来启动项目，就可以免去 ref 的引用以及 HelloWord 的导入操作了

在没有做全局引入的情况下，HellowWorld 和 el-button 依旧可正常显示。

打开自动生成的auto-components.d.ts后可以看到 HelloWorld 和 el-button 已经被自动导入：

问题

项目中使用到了Typescript 和 Eslint，以至于这里报错：找不到名称“ref”

这个错误可能会由 ts 提出，也可能由eslint 提出。

该问题会在下一篇文章来说明如何处理。