第二节安装 Element‑Plus unplugin 自动按需导入配置目标实现 Element Plus 组件、样式自动按需引入不需要手动 import 组件和 css模板直接写 el‑xxx 标签即可。步骤 1安装依赖终端执行pnpm add element-plus pnpm add-D unplugin-vue-components unplugin-auto-importelement‑plusUI 库unplugin‑auto‑import自动导入 vue、api不用手动import ref,reactiveunplugin‑vue‑components自动导入 Element Plus 组件步骤 2修改项目根目录vite.config.jsimport{fileURLToPath,URL}fromnode:urlimport{defineConfig}fromviteimport vue fromvitejs/plugin-vue// 新增导入import AutoImport fromunplugin-auto-import/viteimport Components fromunplugin-vue-components/viteimport{ElementPlusResolver}from unplugin-vue-components/resolvers// https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),// 自动导入配置AutoImport({resolvers:[ElementPlusResolver()],// 生成自动导入的ts类型声明js项目也保留imports:[vue,vue-router,pinia],dts:false}),Components({resolvers:[ElementPlusResolver()],dts:false})],resolve:{alias:{:fileURLToPath(newURL(./src,import.meta.url))}}})步骤 3简单测试 Element Plus 是否生效新建临时测试文件src/views/TestEl.vuetemplatediv classtest-pageel-button typeprimary主要按钮/el-buttonel-input v-modelinputValplaceholder测试输入框/el-input/div/templatescript setup// 重点没有手动 import el-button、el-input也没有import refconstinputValref()/scriptstyle scoped.test-page{padding:30px;}.el-input{width:300px;margin-left:20px;}/style修改src/router/index.js临时增加一条路由用于测试import{createRouter,createWebHistory}fromvue-routerconstroutes[{path:/,redirect:/test},{path:/test,component:()import(/views/TestEl.vue)}]constroutercreateRouter({history:createWebHistory(import.meta.env.BASE_URL),routes})exportdefaultrouter✅第二节测试保存全部文件重启服务必须重启 viteunplugin 插件修改需要重启pnpm dev浏览器自动跳转/test页面出现蓝色 el‑primary 按钮、输入框可以输入内容。控制台无报错。关键点代码里没有手动导入 ref、el 组件但是可以直接使用代表自动按需导入配置成功。