unplugin-auto-import

unplugin-auto-import 是一个用于** Vue 3**的插件，它可以自动导入你在代码中使用的 Vue Composition API 函数（如 ref, reactive, computed 等）以及来自其他库的函数（如 Vue Router 的 useRoute, useRouter，或者 Pinia 的 defineStore 等）。

插件->减少样板代码和提高开发效率。Vue 3** 开发时每个组件中导入许多函数。unplugin-auto-import 通过自动检测你的代码并为你导入必要的函数来解决这个问题。

安装

npm install unplugin-auto-import --save-dev

配置

vite.config.ts

import { defineConfig } from 'vite'  
import AutoImport from 'unplugin-auto-import/vite'
  
export default defineConfig({  
  plugins: [  
    AutoImport({  
      // 你可以指定要自动导入的库  
      imports: [  
        'vue',  
        'vue-router',
        {
            vuex: ['useStore'],
        },
        // ...其他库  
      ],
       // 使用typescript，需要指定生成对应的d.ts文件或者设置为true,生成默认导入d.ts文件
      dts: 'types/auto-imports.d.ts',
      // 配置本地目录 自动引入
      dirs: ['./src/**'],
      // 你可以指定要排除的导入  
      eslint: {  
        // 如果你正在使用 ESLint，这个选项将生成相应的 ESLint 规则  
        inheritEnv: true,  
        // 如果你想禁用 ESLint 规则，可以设置为 false  
        // disabled: true,  
      },  
    }),  
    // ...其他插件  
  ],  
})

unplugin-auto-import 还支持 TypeScript，并且可以与 ESLint 集成，以在你不小心显式导入已自动导入的函数时发出警告。

配置详解

• dirs： 目录下模块导出的自动导入。默认情况下，它只扫描目录下的一级模块，我们可以添加一些通配符来做筛选,限定到指定目录，或者到src 都可以做到自动引入，但是为了精确化查找，建议匹配越精准越好
• dts： 生成相应.d.ts文件的文件路径。默认为“”/在本地安装“typescript”时自动导入.d.ts。
• imports: 需要全局引入的

 AutoImport({
      dts: true, // 会在根目录生成auto-imports.d.ts，里面可以看到自动导入的api
      include: [/\.[tj]sx?$/, /\.vue$/], // 匹配的文件，也就是哪些后缀的文件需要自动引入
      imports: [ // 自动引入的api从这里找
        'vue',
        'vue-router',
        // 详细配置
        {
          '@vueuse/core': [
            // named imports
            'useMouse', // import { useMouse } from '@vueuse/core',
            // alias
            ['useFetch', 'useMyFetch'] // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          axios: [
            // default imports
            ['default', 'axios'] // import { default as axios } from 'axios',
          ]
        }
      ],
      // 解析器配置
      resolvers: [], // 第三方ui
      // 根据项目情况配置eslintrc，默认是不开启的
      eslintrc: {
        enabled: true // @default false
        // 下面两个是其他配置，默认即可
        // 输出一份json文件，默认输出路径为./.eslintrc-auto-import.json
        // filepath: './.eslintrc-auto-import.json', // @default './.eslintrc-auto-import.json'
        // globalsPropValue: true, // @default true 可设置 boolean | 'readonly' | 'readable' | 'writable' | 'writeable'
      }
    })

使用

现在，你可以在你的 Vue 组件中直接使用 Vue Composition API 的函数，而无需显式导入它们。

<template>  
  <div>{{ count }}</div>  
  <button @click="increment">Increment</button>  
</template>  
  
<script setup>  
// 不需要显式导入 ref 或 onMounted  
const count = ref(0)  
const increment = () => {  
  count.value++  
}  
</script>

unplugin-vue-components

安装

npm install unplugin-vue-components --save-dev

配置

在Vite的配置文件（vite.config.js）中配置插件

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import
      resolvers: [AntDesignVueResolver({ importStyle: false, resolveIcons: true })]
    })
  ]
})