本期推荐的是一套专为开发者、设计师和产品经理准备的基于 Vue 3 的桌面端组件库——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')Volar 支持
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型
// tsconfig.json
{
"compilerOptions": {
// ...
"types": ["element-plus/global"]
}
}基础用法
使用 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>部分组件
- Color 色彩
- Container 布局容器
- 其他组件
项目基于MIT开源协议，更多内容大家可自行前往阅读。
