前言
相信很多vue
开发的同学都应该听说过antfu
这号人物,也使用过他开发的系列工具,比如我个人常用的vueuse
vitesse
unocss
等,对于一些懒得引入api的开发者来说(是的,就是我),unplugin-vue-components
unplugin-auto-import
更是偷懒必备神器,下面我就从使用和原理两方面来浅析unplugin-auto-import
插件。
介绍
unplugin-auto-import
插件,为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API,支持TypeScript
使用方法
这章节我们先来简单使用下unplugin-auto-import
,对于已经使用过该插件的同学可以先跳过这章节看后面的原理。
准备工程
我们先创建一个vite+vue+typescript工程
pnpm create vite
D:\project>pnpm create vite
Progress: resolved 1, reused 1, downloaded 0, added 1, done
+ √ Project name: ... unimport-fun
+ √ Select a framework: » Vue
+ √ Select a variant: » TypeScript
Scaffolding project in D:\project\unimport-fun...
Done. Now run:cd unimport-funpnpm installpnpm run dev
D:\project>
pnpm install
后运行工程
![](https://i-blog.csdnimg.cn/blog_migrate/7899441bcd024d8bfbad253153ff212e.png)
下面有个count按钮,对应的是src/components/HelloWorld.vue
,我们查看这个组件,以下是精简后的主要代码:
<script setup lang="ts"> import { ref } from 'vue'
const count = ref(0) </script>
<template><div class="card"><button type="button" @click="count++">count is {
{ count }}</button></div>
</template>
就是一个ref
响应式数据count,点击按钮+1,这对于学过vue3的应该都不难,觉得理解上有困难的同学可以先去学习下vue3的基础。
引入插件
执行命令安装插件
pnpm add unplugin-auto-import
在vite.config.ts
配置插件
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+ import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),
+ AutoImport()]
})
unplugin-auto-import
插件内置了一些预设,预设的作用是不用我们自己去配置,就能使用主流框架的api,比如我希望自动导入vue3的api,是这样使用的:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({
+ imports: ['vue']})]
})
这时候运行工程,会发现工程中多了个auto-imports.d.ts
文件,内容是:
// Generated by 'unplugin-auto-import'
export {}
declare global {const EffectScope: typeof import('vue')['EffectScope']const computed: typeof import('vue')['computed']const createApp: typeof import('vue')['createApp']const customRef: typeof import('vue')['customRef']const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']const defineComponent: typeof import('vue')['defineComponent']const effectScope: typeof import('vue')['effectScope']const getCurrentInstance: typeof import('vue')['getCurrentInstance']const getCurrentScope: typeof import('vue')['getCurrentScope']const h: typeof import('vue')['h']const inject: typeof import('vue')['inject']const isProxy: typeof import('vue')['isProxy']const isReactive: typeof import('vue')['isReactive']const isReadonly: typeof import('vue')['isReadonly']const isRef: typeof import('vue')['isRef']const markRaw: typeof import('vue')['markRaw']const nextTick: typeof import('vue')['nextTick']const onActivated: typeof import('vue')['onActivated']const onBeforeMount: typeof import('vue')['onBeforeMount']const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']const onDeactivated: typeof import('vue')['onDeactivated']const onErrorCaptured: typeof import('vue')['onErrorCaptured']con