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

文章介绍

接下来将会以Vite + Vue3 + TS的项目来举例实现
在我们举行项目开发时，无论是声明响应式数据利用的ref、reactive，或是各种生命周期，又或是computed、watch、watchEffect、provide-inject。这些都需要前置引入才能利用：

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

复制代码

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

1. 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作为包管理工具，大家可以根据本身的情况来调解安装方式 

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

复制代码

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

1. pnpm install element-plus

复制代码

设置 

我的项目是vite构建，所以对应的项目构建设置文件是vite.config.ts
为方便管理插件设置，我通常会把插件设置写到一个单独的文件中，再到vite.config.ts中引入，大家可以直接写到设置文件中。
由于要用Element组件库做组件免导入的演示，所以下面设置了ElementPlusResolver相关代码，这块代码大家在Element+的按需导入说明中可以看到；其他设置可以从npm依靠介绍中查看。

1. // /config/plugin/index.ts
2. import vue from '@vitejs/plugin-vue';
3. import AutoImport from 'unplugin-auto-import/vite';
4. import Components from 'unplugin-vue-components/vite';
5. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
7. export function vitePluginsConfig(command = 'serve') {
8.   return [
9.     vue({ include: [/\.vue$/, /\.md$/] }),
10.     AutoImport({
11.       imports: ['vue'],
12.       resolvers: [ElementPlusResolver()],
13.       dts: 'types/auto-imports.d.ts' // 会在根目录下的types目录中生成该文件——记录自动导入了哪些模块
14.     }),
15.     Components({
16.       dirs: ['src'],
17.       dts: 'types/auto-components.d.ts', // 会在根目录下的types目录中生成该文件——记录自动导入了哪些组件
18.       resolvers: [ElementPlusResolver()]
19.     }),
20.   ];
21. }

复制代码

1. // vite.config.ts
2. import { vitePluginsConfig } from './config/plugin'
3. import { defineConfig } from 'vite'
5. export default defineConfig({
6.   plugins: vitePluginsConfig()
7. })

复制代码

演示

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

在没有做全局引入的情况下，HellowWorld 和 el-button 依旧可正常体现 。
 打开自动天生的auto-components.d.ts后可以看到 HelloWorld 和 el-button 已经被自动导入：

 问题 

   项目中利用到了Typescript 和 Eslint，以至于这里报错：找不到名称“ref”
  这个错误可能会由 ts 提出，也可能由eslint 提出。
  该问题会在下一篇文章来说明怎样处置惩罚。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。