一、安装依赖
首先,安装用于按需引入 Element Plus
的插件:
npm install -D unplugin-vue-components unplugin-auto-import
二、配置 Vite
在 vite.config.js
文件中进行配置,添加这两个插件以自动按需引入组件和样式。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
plugins: [
vue(),
// 自动引入 Element Plus 组件
Components({
resolvers: [ElementPlusResolver()],
}),
// 自动引入 Element Plus 相关的 API
AutoImport({
resolvers: [ElementPlusResolver()],
}),
],
});
三、移除全局导入
在使用该方法之后,不再需要手动在每个文件中导入 Element Plus
组件,因为这些插件会自动处理按需引入。您也不需要在代码中导