专为开发者准备的Vue3组件库Element Plus

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一套专为开发者、设计师和产品经理准备的基于 Vue 3 的桌面端组件库——Element Plus。

Element Plus介绍

Element Plus 是基于 Vue 3.0 对 Element UI 的升级适配，使用 TypeScript + Composition API 重构的全新项目。官方宣称使用最适合 Vue 3.0 的方式几乎重写了每一行 Element UI 的代码，同样来自于饿了么团队。

Element Plus相较于Element UI有以下提升

使用 TypeScript 开发，提供完整的类型定义文件
使用 Vue 3.0 Composition API 降低耦合，简化逻辑
使用 Vue 3.0 Teleport 新特性重构挂载类组件
使用 Lerna 维护和管理项目
使用更轻量更通用的时间日期解决方案 Day.js
升级适配 popperjs, async-validator 等核心依赖
完善 52 种国际化语言支持
全新的视觉
优化的组件 API
更多自定义选项
更加详尽友好的文档

安装使用

由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 浏览器

建议使用包管理器 (NPM、Yarn、pnpm) 安装 Element Plus，然后就可以使用打包工具，例如 Vite 和 webpack

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

浏览器直接引入

直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 了. 根据不同的 CDN 提供商有不同的引入方式，根据不同的 CDN 提供商有不同的引入方式，我们在这里以 unpkg 和 jsDelivr 举例，你也可以使用其它的 CDN 供应商

unpkg

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

jsDelivr

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

完整引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

基础用法

使用 type 、 plain 、 round 和 circle 来定义按钮的样式。

<template>
  <el-row 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>
    <el-button>中文</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle></el-button>
    <el-button type="primary" :icon="Edit" circle></el-button>
    <el-button type="success" :icon="Check" circle></el-button>
    <el-button type="info" :icon="Message" circle></el-button>
    <el-button type="warning" :icon="Star" circle></el-button>
    <el-button type="danger" :icon="Delete" circle></el-button>
  </el-row>
</template>

<script lang="ts" setup>
import {
  Search,
  Edit,
  Check,
  Message,
  Star,
  Delete,
} from '@element-plus/icons-vue'
</script>

<style>
:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-error: #f56c6c;
  --el-color-info: #909399;
}
</style>