UI 组件库 - ElementPlus

UI 组件库-ElementPlus

简介

Element Plus 是基于 Vue3.0 的现代化 UI 组件库，采用 TypeScript 开发，提供了完整的组件库，包括按钮、表单、表格等。具备自定义主题、模块化导入等特性，帮助开发者快速构建美观、功能强大的用户界面。此外，Vue 3.0 不再兼容 IE，所以 Element Plus也提高了最低兼容的版本（Eage>=79）。

Vue 页面组件库

组件库名称	简介	官网地址
Element-plus（推荐）	一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。目前的业界主流	https://element-plus.org/zh-CN/
ant-design-vue	ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步	https://antdv.com/docs/vue/introduce-cn
arco.design	字节跳动推出的UI组件库,由 Byte Design 升级而来	https://arco.design/
Naive UI	基于当前比较新的 Vue 3.0/TypeScript 技栈开发的前端 UI 组件库	https://www.naiveui.com/zh-CN/os-theme
Vuetify	Vuetify 是一个功能强大的 Vue 组件框架	https://vuetifyjs.com/zh-Hans/introduction/why-vuetify/

选择 ElementPlus 的理由

基于 Vue 3.0：Element Plus 是专为Vue 3.0 版本设计的，充分利用了 Vue 3.0 的性能提升和新特性。
完整的组件库：Element Plus 提供了丰富的 UI 组件，减少了组件封装的步骤，包含的组件涵盖了常用的前端界面元素。
响应式设计：其组件具有良好的响应式设计，可以在不同设备上提供一致的用户体验，适应各种屏幕尺寸。
模块化导入：支持按需导入组件，可以有效地减小项目的打包体积，提升应用的性能表现。
官方文档完善：Element Plus 提供了详尽的官方文档，包括组件的使用说明、示例代码等，方便初学者查阅和学习。

安装 Element Plus

项目中安装（推荐）

进入项目根目录，使用包管理器安装：
- npm install element-plus --save

//  安装成功后，可以在package.json 看到依赖的版本号
"dependencies": {
    "element-plus": "^2.3.3",
    "vue": "^3.2.47"
  }

浏览器引入使用（了解）

Html 标签直接引入 ElementPlus 有两种方式：

unpkg 引入

在 HTML 文件中添加以下代码，将 Element Plus 从 unpkg CDN 引入：

<!-- unpkg -->
<head>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <!-- 引入 Vue -->
  <script src="https://unpkg.com/vue@3"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-plus"></script>
</head>

jsDeliver 引入

使用 jsDeliver 提供的 CDN 地址引入 Element Plus，jsDeliver 是一个支持前端库、框架等资源的 CDN 服务：

<!-- jsDelivr -->
<head>
  <!-- 引入样式 -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
  />
  <!-- 引入 Vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
  <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
</head>

Element Plus 使用

在 Vue 的实例中，使用 .use(ElemntPlus) 的方式注册 ElementPlus，这样就可以在应用中使用 Element Plus 提供的组件和功能。

项目中使用 Element Plus

main.js

import { createApp } from 'vue'
import App from './App.vue'
// 导入 Element Plus 组件和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
// 向 App 中注册 Element Plus
app.use(ElementPlus)
app.mount('#app')

App.vue

<script setup>
    import ep from './components/MyComponents/ep.vue'
</script>

<template>
    <ep></ep>
</template>

ep.vue

<script setup>
    import {ref} from "vue"
    const message = ref("Hello ElementPlus Project Button")
</script>

<template>
    <el-button type="primary" plain>{{message}}</el-button>
</template>

HTML 页面中直接使用 Element Plus

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入样式 -->
          <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
        <!-- 引入 Vue -->
        <script src="//unpkg.com/vue@3"></script>
        <!-- 引入组件库 -->
        <script src="//unpkg.com/element-plus"></script>
    </head>
    <body>
        <div id="app">
        <!-- 使用 Elenment plus 中的按钮组件，展示文本内容 -->
        <el-button type="primary" plain>{{message}}</el-button>
        </div>
        <script>
            const{createApp}=Vue;
            createApp({
                data(){
                    return {
                        message:'Hello Element plus Page Button'
                    }
                }
            }).use(ElementPlus).mount("#app")
        </script>
    </body>
</html>

组件 API

Element Plus 组件库提供了一系列功能丰富、易于使用的组件以及相应的组件API。

Element Plus 的组件API可以用于创建、定制和控制各种交互式 UI 组件，并提供了丰富的配置选项和事件回调函数，使开发者能够灵活地操作和响应用户的操作。

通过 Element Plus 的组件API，开发者可以实现诸如表单验证、数据可视化、导航菜单、弹窗提示、数据表格等常见的 Web 应用功能。使用这些组件API，开发者可以轻松构建具有吸引力和易用性的界面，提高开发效率，并且确保应用程序的一致性和可维护性。

Element Plus 的组件API为开发者提供了丰富的、易于使用的组件和相关功能，帮助构建出现代化、交互丰富的 Web 应用程序，提高开发效率和用户体验。

API 格式

以按钮组件为例

属性名	说明	类型	默认值
size	尺寸	enum	—
type	类型	enum	—

size 属性的 enum 类型包含 large 、 default 、 small
type 属性的 enum 类型包含 primary 、 success 、 warning 、danger 、info

总结

本章节主要介绍 Element Plus UI组件库的安装和使用，以及如何查看组件 API。