和满屏import说拜拜！unplugin-auto-import自动引入vue官方api

前言

在Vue项目里，我们会引入很多vue相关函数，加上其他的import，就要写很多行，看着实在烦躁，就像这样：

而且有时候在使用Vue的api时还会忘记引用，很不方便。unplugin-auto-import插件就可以完美解决这个问题！

介绍

unplugin-auto-import是一个按需自动导入Vue、Vue Router、Pinia等官方Api的插件。

使用此插件后，不需要手动编写类似import {xx} from 'vue'这样的代码了，而是直接使用相关api，提升开发效率。

// 原来写法
import { computed, ref } from 'vue'
 
const count = ref(0)
const doubled = computed(() => count.value * 2)
 
// 使用插件后
const count = ref(0)
const doubled = computed(() => count.value * 2)

使用

1、安装

npm i -D unplugin-auto-import

2、配置文件使用

• Vite

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
  plugins: [
    AutoImport({ 
        imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue和vue-router相关函数
        dts: './auto-import.d.ts' // 生成 `auto-import.d.ts` 全局声明（ts项目添加上）
    }),
  ],
})

• Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({
        imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue和vue-router相关函数
        dts: './auto-import.d.ts' // 生成 `auto-import.d.ts` 全局声明（ts项目添加上）
    }),
  ],
}

3、更多配置项

比如跟eslintc相关配置

antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup (github.com)