unplugin-auto-import 按需自动导入

背景

hello，大家好，我是小王，最近也在开始使用vue3了，但是在每个vue文件中都会写一次 import {ref, computed} from 'vue' ，就想能不能不用每次这样写，于是...

unplugin-auto-import 简介

unplugin-auto-import 是为Vite、Webpack、Rollup和esbuild按需自动导入API，同时支持TypeScript。

附上链接：www.npmjs.com/package/unp…

开始使用

1. 安装插件·

   npm install -D unplugin-auto-import 
   

2. 在 vue.config.js 中的配置,参考官方Webpack的配置

   // vue.config.js
   module.exports = defineConfig({
       // ...
       configureWebpack: {
       plugins: [
         require('unplugin-auto-import/webpack')({
           imports: ['vue'], // 全局导入，我这边目前只用到vue，如果需要其他的也可以导入
           dts: './auto-imports.d.ts', // 支持TS类型提示
         }),
       ],
     },
   })
   

3. 使用前后对比

   <script setup>
       // 没有使用unplugin-auto-import
       import { computed, ref } from 'vue'
       const count = ref(0)
       const doubled = computed(() => count.value * 2)
   </script>
   

   <script setup>
       // 使用unplugin-auto-import
       const count = ref(0)
       const doubled = computed(() => count.value * 2)
   </script>
   

这样摸鱼时间是不是又多了一丢丢