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

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";',
      },
    },
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

重启项目后发现在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14