Vue3+Vite项目按需自动导入配置及常见问题修复

文章目录

一、Vue API自动导入

解决的问题：避免在每个vue组件中都重复性的去声明ref,reactive等。如下：

import{ref, reactive}from'vue'// 配置自动导入，用来省略这句手动引入 const test =ref('aaaa')

1.1 配置

unplugin-auto-import

具体配置：

• 安装vite插件：unplugin-auto-import

import{ defineConfig }from'vite';import vue from'@vitejs/plugin-vue';import AutoImport from'unplugin-auto-import/vite';exportdefaultdefineConfig({plugins:[vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports:['vue'],}),],});

1.2 可能遇到ts,eslint不识别而导入报错的问题

1、typescript 报错：

'reactive' is not defined.

• 原因：TS未识别到vue api,没有相应的模块声明文件
• 处理：在vite中配置并生成auto-imports.d.ts ，并在tsconfig.json中引入 ’

// vite.config.jsexportdefaultdefineConfig({plugins:[vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports:['vue'],// 生成自动导入的TS声明文件dts:"/auto-import.d.ts",}),],});

• tsconfig.json

{"include":["src/**/*.d.ts","./*.d.ts","./auto-imports.d.ts"// 导入上一步生成的配置文件],}

2、eslint不识别报错

error 'reactive' is not defined no-undef

原因

：未配置自动导入相应的eslint规则

处理

：通过autoimport中的配置生成对应

.eslintrc-auto-import.json

配置文件，并在.eslintrc中引入

// vite.config.js  {// ......AutoImport({imports:["vue"],resolvers:[ElementPlusResolver()],dts:"/auto-import.d.ts",eslintrc:{enabled:true,// 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗},}),}

extends:[//....此处活力之前配置."./.eslintrc-auto-import.json",],

1.3 配置src/component目录下的组件自动引入

在页面组件中，不用手动导入组件，直接使用组件的方式：

import{ defineConfig }from'vite';import vue from'@vitejs/plugin-vue';import AutoImport from'unplugin-auto-import/vite';import Components from'unplugin-vue-components/vite';exportdefaultdefineConfig({plugins:[vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports:['vue'],}),Components({// 指定自动导入的组件位置，默认是 src/componentsdirs:['src/components','src/otherComponents'],}),],});

二、按需引入UI组件库（antd,element-plus）

2.1、按需引入element-plus

官方文档很清晰，用到

unplugin-vue-components 

和

unplugin-auto-import

这两款插件

// vite.config.tsimport{ defineConfig }from'vite'import AutoImport from'unplugin-auto-import/vite'import Components from'unplugin-vue-components/vite'import{ ElementPlusResolver }from'unplugin-vue-components/resolvers'exportdefaultdefineConfig({// ...plugins:[// ...AutoImport({// 自动导入element相关函数，如：ElMessage, ElMessageBox..resolvers:[ElementPlusResolver()],}),Components({// 自动导入element相关组件resolvers:[ElementPlusResolver()],}),],})

2.2 ant-design-vue 按需引入

import{ defineConfig }from'vite'import vue from'@vitejs/plugin-vue'import Components from'unplugin-vue-components/vite'import{ AntDesignVueResolver }from'unplugin-vue-components/resolvers'exportdefaultdefineConfig({plugins:[vue(),Components({resolvers:[AntDesignVueResolver(),],}),]})

2.3 自动导入 Element Plus Icon

element-plus 图标是用 svg 渲染的，需要额外的导入方法。官方文档对于icons也有相应说明。

• 安装额外插件：npm install -D unplugin-icons
• 配置自动导入

import{ defineConfig }from'vite';import vue from'@vitejs/plugin-vue';import AutoImport from'unplugin-auto-import/vite';import Icons from'unplugin-icons/vite';import IconsResolver from'unplugin-icons/resolver';import Components from'unplugin-vue-components/vite';import{ ElementPlusResolver }from'unplugin-vue-components/resolvers';exportdefaultdefineConfig({plugins:[vue(),AutoImport({resolvers:[// ....// 自动导入图标组件IconsResolver({prefix:'Icon',}),],}),Components({resolvers:[// .....// 自动注册图标组件IconsResolver({enabledCollections:['ep'],//@iconify-json/ep 是 Element Plus 的图标库，所以 IconsResolver 配置了 enabledCollections: ['ep']}),],}),Icons({autoInstall:true,}),],});

注意：通过此方法自动引入后，使用icon时，请采用以下方式才生效。（添加

i-eq

作为icon前缀）

<el-icon:size="70"color="#409EFC"class="no-inherit"><i-ep-share/></el-icon>

三、关于配置文件

unplugin-auto-import

会默认在要目录生成

auto-imports.d.ts

文件，

unplugin-vue-components

对应会在根目录生成

components.d.ts

文件，分别描述自动导入的 API、component。通过在tsconfig.json的include中引入对应配置文件，避免TS报错。

AutoImport({// ...// 配置文件生成位置，默认是根目录 /auto-imports.d.ts// dts: './auto-imports.d.ts',}),Components({// ...// 配置文件生成位置，默认是根目录 /components.d.ts// dts: './components.d.ts',}),