专为开发者、设计师和产品经理准备的Vue3组件库
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一套专为开发者、设计师和产品经理准备的基于 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 浏览器
<hr>
使用包管理器
建议使用包管理器 (NPM、Yarn、pnpm) 安装 Element Plus，然后就可以使用打包工具，例如 Vite 和 webpack
# 选择一个你喜欢的包管理器# NPM$ npm install element-plus –save# Yarn$ yarn add element-plus# pnpm$ pnpm install element-plus<hr>
浏览器直接引入
直接通过浏览器的 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><hr>
完整引入
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便
// main.tsimport { 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”] }}<hr>
基础用法
使用
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 布局容器
- 其他组件
Button 按钮 | Element Plus
项目基于MIT开源协议，更多内容大家可自行前往阅读。
开源地址：https://github.com/element-plus/element-plus
原创文章，作者：starterknow，如若转载，请注明出处：https://www.starterknow.com/126810.html
starterknow