下划线学习频道Appearance
在 项目中组件库引入 章节介绍了组件需要按需导入，因此我们要配置按需导入的 vite 插件,将vite插件都集成在 /build/plugins/ 目录里
| 插件 | 概念 | 自动导入对象 |
|---|---|---|
| unplugin-auto-import | 按需自动导入API | ref，reactive，watch，computed等API |
| unplugin-vue-components | 按需自动导入组件 | Element Plus等第三方库和指定目录下的自定义组件 |
autoImport.ts
创建文件 /build/plugins/autoImportDeps.ts 用来管理 unplugin-auto-import 插件
unplugin-auto-import 该插件主要用于自动导入 JavaScript 语法和库。它可以自动导入 Vue Composition API、JavaScript 语法、甚至是你自己定义的函数或对象。减少了手动引入的步骤
注意如果你使用 ts 你需要配置声明 ts 导入的配置文件 dts 属性，需要将声明文件配置到 tsconfig 中的 include 字段一般配置是将生成文件放到 types 文件下
json
// tsconfig.json
"include": [ "types/**/*.d.ts", "types/**/*.ts"]如果你开启 eslint,因为自动导入的缘故，没有在业务中声明（之前你是先声明 ts 找到导入的声明文件来识别这些类型），因此在使用这些自动导入的api 时候会出现eslint 的报错，此时需要 对 eslintrc 配置生成 .eslintrc-auto-import.json,并且需要你将声明的文件配置到 eslint 配置文件的 extends 中进行声明
json
"extends": [
"./.eslintrc-auto-import.json"
],这里使用的是 element-plus 因此需要导入 element-plus 一些反馈组件（自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)），和常用的 vue 、pinia 、@vueuse/core 包的自动导入配置
js
/**
* @name autoImportDepsPlugin
* @description 按需加载，自动引入
*/
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
export const autoImportDepsPlugin = () => {
return AutoImport({
// 生成对应的 .d.ts 文件，用于 TypeScript 支持
// 指定自动导入函数TS类型声明文件路径
dts: path.resolve('types', 'auto-imports.d.ts'),
// 定义全局导入的模块和别名
imports: [
'vue',
'pinia',
'vue-router',
{
'@vueuse/core': []
}
],
// 生成对应的 .eslintrc-auto-import.json 文件，用于 ESLint 配置
eslintrc: {
enabled: true,
filepath: path.resolve('.eslintrc-auto-import.json'), // 指定自动导入函数 eslint 规则的文件
globalsPropValue: 'readonly' // 设置全局变量为只读
},
// Auto import functions from Element Plus, e.g. ElMessage, ElMessageBox... (with style)
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
resolvers: [ElementPlusResolver()]
})
}autoRegistryCmpPlugin
unplugin-vue-components 专为 Vue 组件设计，可以自动导入 支持 Vue2 和 Vue3 组件和指令。
可以不需要手动引入组件，能够让开发者就像全局组件那样进行开发，但实际上又是按需引入，且不限制打包工具
js
/**
* @name autoRegistryCmpPlugin
* @description 按需加载，自动引入组件
*/
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
export const autoRegistryCmpPlugin = () => {
return Components({
// Auto register Element Plus components
// 自动导入 Element Plus 组件
resolvers: [ElementPlusResolver()],
// 指定生成的 组件的 ts 文件目录
dts: path.resolve('types', 'components.d.ts'),
directives: true
})
}