当前位置：首页 > ops >正文

Element-Plus 入门指南

ops 2025/9/3 5:46:44

文章目录

简述
安装并引入 Element-Plus
简单案例

简述

Element-Plus 是一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。

Element-Plus 在 Element UI 的基础上进行了升级和优化，提供了更加丰富和强大的组件库。它基于 Vue 3.0 构建，并使用了 TypeScript 进行编写，为开发者提供了类型提示和代码补全等增强功能。Element-Plus 的组件设计简洁明了，易于使用，同时提供了丰富的 API 和插槽，方便开发者进行定制和扩展。

主要特点

丰富的组件库：Element-Plus 提供了多种常用的布局组件和 UI 组件，如容器、栅格布局、卡片、面板、表格、表单、按钮、导航、通知等。这些组件可以帮助开发者快速构建出结构清晰、易于维护的页面布局。
高度的可定制性：Element-Plus 允许开发者通过修改样式、属性、事件等方式对组件进行定制。此外，它还提供了主题定制功能，可以根据需要更换组件的样式。
良好的性能表现：Element-Plus 通过优化组件代码和压缩图片等方式，提高了 Web 应用的加载速度和运行效率。
详细的文档和教程：Element-Plus 提供了详细的文档和教程，帮助开发者更好地掌握和使用该组件库。

兼容性

Element Plus 支持最近两个版本的浏览器。
如果需要支持旧版本的浏览器，请自行添加 Babel 和相应的 Polyfill 。
由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器。

版本 Chrome Edge Firefox Safari
< 2.5.0 Chrome ≥ 64 Edge ≥ 79 Firefox ≥ 78 Safari ≥ 12
2.5.0 + Chrome ≥ 85 Edge ≥ 85 Firefox ≥ 79 Safari ≥ 14.1

版本	Chrome	Edge	Firefox	Safari
< 2.5.0	Chrome ≥ 64	Edge ≥ 79	Firefox ≥ 78	Safari ≥ 12
2.5.0 +	Chrome ≥ 85	Edge ≥ 85	Firefox ≥ 79	Safari ≥ 14.1

安装并引入 Element-Plus

安装
```
npm install element-plus --save
```

按需导入（官方推荐）

自动导入首先需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

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

然后把下列代码插入到 Vite 或 Webpack 的配置文件中：

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

Webpack

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

手动导入

Element Plus 提供了基于 ES Module 开箱即用的 Tree Shaking 功能。

但是需要安装 unplugin-element-plus 来导入样式。

vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'export default defineConfig({// ...plugins: [ElementPlus()],
})

完整引入

如果对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

在 main.js 中写入引入代码：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

简单案例

打开 Element-Plus 的官网

这里以 Button 按钮为例：

Button 按钮组件

复制案例代码粘贴到 Home.vue 文件看演示效果

Button 组件实例代码

<template><div class="mb-4"><el-button>Default</el-button><el-button type="primary">Primary</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning">Warning</el-button><el-button type="danger">Danger</el-button></div>
</template>
<script setup></script>
<style scoped></style>