Vue3.5 企业级管理系统实战（四）：组件及API自动导入配置

最新推荐文章于 2025-05-01 17:42:19 发布

骆驼Lara

最新推荐文章于 2025-05-01 17:42:19 发布

阅读量1k

点赞数 29

CC 4.0 BY-SA版权

分类专栏： Vue # Vue3.5实战文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_40398599/article/details/145319477

目前，项目中的 Element Plus 组件库是全部导入，而我们希望按需导入。因为按需导入 Element Plus 组件库，能显著减小应用体积，提高加载速度，优化资源利用。它让项目结构更模块化，降低维护成本，减少潜在冲突。

1 安装插件

首先，屏蔽掉之前全部引入的代码

通过 pnpm 安装 unplugin-vue-components 和 unplugin-auto-import 插件，可自动按需导入，无需手动操作，兼顾开发效率与性能优化。

unplugin-vue-components 是一个 Vue 3 的组件自动导入插件。它的主要功能如下：

自动导入组件：无需手动导入每个 Vue 组件，插件会自动识别并在需要时导入。

按需加载：只导入项目中实际使用的组件，减少应用的整体大小。

支持多种 UI 库：内置了对许多流行 UI 库的支持，如 Element Plus、Vuetify、Ant Design Vue 等。

简化项目配置：通过简单的配置，即可实现组件的自动导入，减少项目配置的复杂性

unplugin-auto-import 是一个用于自动导入 Vue 3 API 和其他库的 API 的插件。它的主要功能包括：

自动导入 API：无需手动导入 Vue 3 的 API（如 ref, reactive, onMounted 等），插件会自动处理。

减少冗余代码：减少项目中重复的导入语句，使代码更加简洁。

支持自定义配置：可以配置需要自动导入的 API，以及排除某些不需要自动导入的 API。

兼容性：与 TypeScript 和其他构建工具（如 Vite、Webpack）兼容。

pnpm install -D unplugin-vue-components unplugin-auto-import

2 普通组件自动导入配置

2.1 vite 配置

在 vite.config.ts 中引入

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
import UnoCSS from "unocss/vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

// https://vite.dev/config/
export default defineConfig({
  resolve: {
    alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }]
  },
  plugins: [
    vue(),
    UnoCSS({
      configFile: "./UnoCSS.config.ts"
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
});