自动导入插件unplugin-auto-import/unplugin-vue-components

原文地址： devpress.csdn.net/vue/66cd509...

1. unplugin-auto-import(自动导入API)

安装： npm i -D unplugin-auto-import

配置：

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})

options详细配置：

配置解析

1. dirs： 目录下模块导出的自动导入。默认情况下，它只扫描目录下的一级模块，我们可以添加一些通配符来做筛选,限定到指定目录，或者到src 都可以做到自动引入，但是为了精确化查找，建议匹配越精准越好

 // 配置本地目录 自动引入
  dirs: ['./src/utils/**', './src/stores/**'],
 //dirs: ['./src/**'],

2. dts： 生成相应.d.ts文件的文件路径。默认为""/在本地安装"typescript"时自动导入.d.ts。

 dts: './auto-imports.d.ts',

3. imports: 需要全局引入的

示例

without

import { computed, ref } from 'vue'

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

with

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

without

import {f1} from '@/utils'
f1();

with

f1();

without

import {concat} from 'lodash';
console.log(concat([1, 2], [3]))

with

console.log(concat([1, 2], [3]))

---

without

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

with

export function Counter() {
  const [count, setCount] = useState(0)
  return <div>{ count }</div>
}

2. unplugin-vue-components（ 自动导入组件）

安装

npm i -D unplugin-vue-components

配置

这里我测试了一下，就算什么也不写，Components默认会自动引入 /src/components下的文件

// vite.config.ts
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({ /* options */ }),
  ],
})

你也可以再配置一些想自动引入的组件

dirs: ['./src/components', './src/index/components'],

如果害怕组件重名，可以加一个directoryAsNamespace的选项，这样自动导入的组件名称 包含目录 ，就会防止命名冲突

options 里面可以添加一些配置

• 三方组件，也可以在这里进行自动引入

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
Components({
  // vue-components 内置了前端主流的resolve element antd
  resolvers: [ElementPlusResolver()],
  dirs: ['src/components'],
  // 组件名称 包含目录 ，防止命名冲突
  directoryAsNamespace: true,
}),

示例

without