组件库

@Element Plus

安装 Installation

npm install element-plus --save

使用 Usage

1. 完整引入

2. 按需导入 - 推荐

安装依赖 - 2个依赖

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

修改vite配置 - 导入3个库；增加2个插件plugins

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
]

3. 手动导入

开始您的创作吧

更多使用，请访问 Element Plus、Overview 组件总览

常用组件

先引入，再使用

Basic 基础组件

图标 Icon

import { HomeFilled } from '@element-plus/icons-vue'

<el-icon><HomeFilled /></el-icon>

按钮 Button

<el-button type="primary" size="default" :icon="HomeFilled" @click="">hi,there</el-button>
<el-button type="primary" :icon="HomeFilled" circle />
<HomeFilled />

Form 表单组件

表单 Form

时间选择器 TimePicker

穿梭框 Transfer

上传 Upload

Data 数据展示

分页 Pagination

进度条 Progress

标签 Tag

时间线 Timeline

树形控件 Tree

Navigation 导航

面包屑 Breadcrumb

菜单 Menu

步骤条 Steps

标签页 Tabs

Feedback 反馈组件

对话框 Dialog

消息提示 Message

消息弹出框 Message Box

通知 Notification