vue3项目配置按需自动导入API、组件库、图标

import#

指定需要自动导入的库或框架，比如 Vue 和 Vue Router，这样就能自动导入 Vue 的 ref、reactive 等函数，不必在使用时再引入

1
// 未使用前
2
import { computed, ref } from 'vue'
3

4
const count = ref(0)
5
const doubled = computed(() => count.value * 2)
6

7
// 使用插件后
8
const count = ref(0)
9
const doubled = computed(() => count.value * 2)

import 导入分为三类：

1. 基本导入

   类似上述的基本导入，比如：vue、vue-router 等，直接使用全量 API

2. 自定义导入

   1
   {
   2
      'vue': [
   3
        'createVNode',
   4
        'render'
   5
      ],
   6
      'vue-router': [
   7
        'createRouter',
   8
        'createWebHistory',
   9
        'createWebHashHistory',
   10
        'useRouter',
   11
        'useRoute'
   12
      ],
   13
      'uuid': [
   14
        ['v4', 'uuidv4']
   15
      ],
   16
      // 全局使用 _.xxxx()
   17
      'lodash-es': [
   18
        // default imports
   19
        ['*', '_'] // import { * as _ } from 'lodash-es',
   20
      ]
   21
    },

   展开收起
   • ['v4', 'uuidv4']：将 uuid 库中的 v4 函数导入为 uuidv4，相当于import { v4 as uuidv4 } from 'uuid'
   • ['*', '_']: 将 lodash-es 库中的所有导出绑定到 _ 对象上，这相当于 import { \* as _ } from 'lodash-es'

3. 类型导入

   1
   {
   2
     from: 'vue',
   3
     imports: [
   4
       'App',
   5
       'VNode',
   6
       'ComponentPublicInstance',
   7
       'ComponentPublicInstanceCostom',
   8
       'ComponentInternalInstance'
   9
     ],
   10
     type: true
   11
   },
   12
   {
   13
     from: 'vue-router',
   14
     imports: [
   15
       'RouteRecordRaw',
   16
       'RouteLocationRaw',
   17
       'LocationQuery',
   18
       'RouteParams',
   19
       'RouteLocationNormalizedLoaded',
   20
       'RouteRecordName',
   21
       'NavigationGuard'
   22
     ],
   23
     type: true
   24
   }

   展开收起

   这部分配置用于自动导入类型声明，使 TypeScript 能够识别这些类型，从而提供更好的类型检查和自动完成功能。

dirs#

指定需要自动导入的目录，比如自定义的 hooks 和 store。通过指定这些目录，unplugin-auto-import 插件会自动扫描这些目录下的文件，并自动导入其中导出的内容。

1
export function useExample() {}

在可以直接使用 useExample 函数，无需手动导入。插件会自动将这些函数导入到你的组件中。

dts#

指定生成的 TypeScript 类型声明文件的位置

自动生成的 TypeScript 声明文件

当你运行项目时，unplugin-auto-import 会在 src 目录下生成一个 auto-imports.d.ts 文件，声明自动导入的类型。

eslintrc#

生成 ESLint 配置文件，避免未使用导入报错

为了确保 ESLint 不会因为自动导入的变量未定义而报错，你需要在 ESLint 配置中引入自动生成的 .eslintrc-auto-import.json 文件：

include#

include 是一个配置选项，用于指定哪些文件或文件夹应当包含在自动导入扫描范围内。

1
AutoImport({
2
  include: [
3
    './src/**/*.js', // 包含 src 目录下的所有 .js 文件
4
    './components/**/*.vue', // 包含 components 目录下的所有 .vue 文件
5
    /\.[tj]sx?$/, // 包含所有 .ts, .tsx, .js, .jsx 文件
6
    /\.vue\??/ // 所有vue文件
7
  ],
8
  ...
9
})

vueTemplate#

vueTemplate 选项是一个布尔值，用于指定是否在 Vue 组件的 <template> 部分启用自动导入功能。

resolvers#

安装依赖#

1
npm install --save-dev @iconify/vue

配置#

1
import UnpluginIcons from 'unplugin-icons/vite'
2
import IconsResolver from 'unplugin-icons/resolver'
3
...
4

5
export default defineConfig(({ mode }) => {
6
  return {
7
    ...
8
    plugins: [
9
      Components({
10
        directoryAsNamespace: true,
11
        collapseSamePrefixes: true,
12
        resolvers: [
13
          IconsResolver({
14
            prefix: 'AutoIcon'
15
          }),
16
          ElementPlusResolver({
17
            importStyle: 'sass'
18
          })
19
        ]
20
      }),
21
      // Auto use Iconify icon
22
      UnpluginIcons({
23
        autoInstall: true,
24
        compiler: 'vue3',
25
        scale: 1.2,
26
        defaultStyle: '',
27
        defaultClass: 'unplugin-icon'
28
      })
29
    ],
30
  }
31
})

在 vue 页面中引入组件

1
import { Icon } from '@iconify/vue'
2
;<Icon icon="mdi-light:home" />

通过 UnoCSS 可以像 css 那样使用图标

Vue3！Element Plus 如何像 Element UI 一样使用 Icon? Icons preset