【Vue3】自动引入插件-`unplugin-auto-import`

原创已于 2023-08-10 17:51:18 修改 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #前端 #vue.js

于 2023-08-10 17:36:48 首次发布

Vue 及其周边生态专栏收录该内容

163 篇文章

订阅专栏

文章介绍了Vue3项目中如何使用unplugin-auto-import插件实现自动导入API，包括在Vite、Webpack等构建工具中的配置方法，以及如何在TypeScript项目中应用。文章还展示了如何在Vite配置文件中添加插件并重启项目以使更改生效。

Vue3自动引入插件-unplugin-auto-import，不必再手动 import 。

自动导入 api 按需为 Vite, Webpack, Rspack, Rollup 和 esbuild 。支持TypeScript。由unplugin驱动。

插件安装：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({
    imports: ['vue'],
    dts: 'src/auto-import.d.ts',
  })],
  // 通过配置变为全局通用样式
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "./src/bem.scss";',
      },
    },
  }
})

重启项目后发现在src下出现一个suto-import.s.ts文件。
在这里插入图片描述

最后，举例验证插件作用

App.vue

<template>
  <div>
    <button @click="flag = !flag">change flag</button>
    <div>{{ flag }}</div>
  </div>
</template>

<script setup lang="ts">
let flag = ref<boolean>(false)
</script>

<style scoped>

</style>