第二节：安装 Element‑Plus + unplugin 自动按需导入配置

第二节：安装 Element‑Plus + unplugin 自动按需导入配置

目标：实现 Element Plus 组件、样式自动按需引入，不需要手动 import 组件和 css，模板直接写 el‑xxx 标签即可。

步骤 1：安装依赖

终端执行

pnpm add element–plus
pnpm add –D unplugin–vue–components unplugin–auto–import

• element‑plus：UI 库
• unplugin‑auto‑import：自动导入 vue、api，不用手动import ref,reactive
• unplugin‑vue‑components：自动导入 Element Plus 组件

步骤 2：修改项目根目录 vite.config.js

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 新增导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin–vue–components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 自动导入配置
AutoImport({
resolvers: [ElementPlusResolver()],
// 生成自动导入的ts类型声明，js项目也保留
imports: ['vue', 'vue-router', 'pinia'],
dts: false
}),
Components({
resolvers: [ElementPlusResolver()],
dts: false
})
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})

步骤 3：简单测试 Element Plus 是否生效

新建临时测试文件 src/views/TestEl.vue

<template>
<div class="test-page">
<el–button type="primary">主要按钮</el–button>
<el–input v–model="inputVal" placeholder="测试输入框"></el–input>
</div>
</template>

<script setup>
// 重点：没有手动 import el-button、el-input，也没有import ref
const inputVal = ref('')
</script>

<style scoped>
.test–page {
padding: 30px;
}
.el–input {
width: 300px;
margin–left: 20px;
}
</style>

修改 src/router/index.js，临时增加一条路由用于测试

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
{
path: '/',
redirect: '/test'
},
{
path: '/test',
component: () => import('@/views/TestEl.vue')
}
]

const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})

export default router

✅第二节测试

pnpm dev

关键点：代码里没有手动导入 ref、el 组件，但是可以直接使用，代表自动按需导入配置成功。