import {ElForm,ElButton,ElInput,ElFormItem} from ‘element-plus‘如何全局自动引入

leijmdas

于 2025-07-30 10:51:46 发布

阅读量150

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/leijmdas/article/details/149771518

在 Vue 3 + Vite 项目中，一行配置即可让 ElForm / ElButton / ElInput / ElFormItem 等所有 Element Plus 组件自动按需引入，无需再写任何 import { ... } from 'element-plus'。

✅ 步骤 1：安装必要插件

bash

复制

npm i -D unplugin-vue-components unplugin-auto-import

✅ 步骤 2：修改 `vite.config.ts`

TypeScript

复制

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    // 自动按需引入 Element Plus 组件 + 样式
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    // （可选）自动引入 Vue 组合式 API
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

✅ 步骤 3：重启开发服务器

bash

复制

npm run dev

✅ 使用示例（无需手动 import）

vue

复制

<template>
  <el-form>
    <el-form-item label="用户名">
      <el-input />
    </el-form-item>
    <el-button type="primary">提交</el-button>
  </el-form>
</template>

<script setup>
// 这里完全不需要 import ElForm / ElButton 等
</script>