本文首发：《Element Plus for Vue 3 入门教程》
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第三方组件库来说是一件坏事，那些曾经修修补补无数次，还无奈彻底解决的问题，在这次面向 Vue 3.0 重构时，一次性全副解决。
Element Plus 有那些降级？
Element Plus 应用 Vue 3 与 TypeScript开发，提供残缺的类型定义文件，应用 Composition API 简化逻辑，升高耦合。
Element Plus 这一次应用 TypeScript + Composition API 来进行重构
- 应用 TypeScript 开发
- 应用 Vue 3 Teleport 新个性重构挂载类组件
- 应用 Vue 3 Composition API 简化逻辑，升高耦合
- 抉择了 Day.js 这种更轻便通用的工夫日期选择器解决方案
- 应用 Lerna 保护和治理我的项目
- 降级适配 async-validator，popperjs 等外围依赖
- 欠缺 52 种国际化语言反对
Element Plus 与 Element UI 是什么关系？
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构，就如同 vue-next 对于 vue 一样，你能够了解为不同的大版本。
具体可参见 Element 的 README：https://github.com/ElemeFE/el...
老 Element 我的项目是否能够平滑降级到 Vue 3 + Element Plus ？
Vue 从 2 到 3 的降级，自身就有局部 API 进行了调整，Element Plus 作为 Vue 3 的第三方库，也不可避免的在这些更新的细节上也进行了对应的批改。所以老我的项目降级到全新的 Element Plus 这些适配 Vue 3 的局部也就追随一起要做简略的变动。不过大家不必放心，整体变动并不大。
Element Plus 相干生态
- Element Plus Playground - element-plus.run 在线测试
- Element Plus Icons - Element Plus 图标汇合
- Element Plus Vite Starter - Vite 疾速上手模板
- unplugin-element-plus - Element Plus 按需加载款式插件
- Design Materials - Element Plus 社区的 Logo、表情包等资源
- awesome-element-plus - Element Plus 模板与资源列表和相干库
更多顶级 Vue 3 开源 UI 库测评，请看这篇：《12 款最棒 Vue 开源 UI 库测评 - 特地针对国内应用场景举荐》
无关 Element Plus 与低代码开发工具卡拉云的比照测评，请见本文文尾。
怎么装置、引入 Element Plus？
上图为追随本教程搭建的 Element Plus 实现界面
创立 Vue 3 环境和新我的项目
vue create element-pluscd element-plus抉择 vue 3 让他主动装置，而后 cd 到 element-plus 我的项目目录，接下里的操作都在这个目录里实现。
应用 vue add 主动帮你抉择适配的版本
vue add element-plus抉择残缺引入，实现 Element-plus 引入。
特地留神：npm 的形式装置曾经不再实用于 Element-plus v1.1.0-beta.21 版本，如果你应用这种形式，启动vue的时候会呈现这种谬误：ERROR Failed to compile with 2 errors，请更换成 vue add 装置。
装置按需引入插件 babel-plugin-import 咱们能够只引入须要的组件，以便打包时减小体积。
npm install babel-plugin-import -D我的项目创立实现、Element-plus 引入实现后，咱们来批改代码，把 Element-plus 配置起来
首先批改 babel.config.js 配置文件，改为：
module.exports = { plugins: [ [ "import", { libraryName: 'element-plus', customStyleName: (name) => { return `element-plus/lib/theme-chalk/${name}.css`; }, }, ], ],};而后在 src 目录下新增文件夹 utils ，创立 elementPlus.js 文件，此配置文件用于阐明 element plus 须要引入那些组件。
以下是组件的残缺列表，大家可依据本人的需要增减：
import { ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge, ElBreadcrumb, ElBreadcrumbItem, ElButton, ElButtonGroup, ElCalendar, ElCard, ElCarousel, ElCarouselItem, ElCascader, ElCascaderPanel, ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElCol, ElCollapse, ElCollapseItem, ElCollapseTransition, ElColorPicker, ElContainer, ElDatePicker, ElDialog, ElDivider, ElDrawer, ElDropdown, ElDropdownItem, ElDropdownMenu, ElFooter, ElForm, ElFormItem, ElHeader, ElIcon, ElImage, ElInput, ElInputNumber, ElLink, ElMain, ElMenu, ElMenuItem, ElMenuItemGroup, ElOption, ElOptionGroup, ElPageHeader, ElPagination, ElPopconfirm, ElPopover, ElPopper, ElProgress, ElRadio, ElRadioButton, ElRadioGroup, ElRate, ElRow, ElScrollbar, ElSelect, ElSlider, ElStep, ElSteps, ElSubmenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTag, ElTimePicker, ElTimeSelect, ElTimeline, ElTimelineItem, ElTooltip, ElTransfer, ElTree, ElUpload, ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification,} from 'element-plus';export const components = [ ElAlert, ElAside, ElAutocomplete, ElAvatar, ElBacktop, ElBadge, ElBreadcrumb, ElBreadcrumbItem, ElButton, ElButtonGroup, ElCalendar, ElCard, ElCarousel, ElCarouselItem, ElCascader, ElCascaderPanel, ElCheckbox, ElCheckboxButton, ElCheckboxGroup, ElCol, ElCollapse, ElCollapseItem, ElCollapseTransition, ElColorPicker, ElContainer, ElDatePicker, ElDialog, ElDivider, ElDrawer, ElDropdown, ElDropdownItem, ElDropdownMenu, ElFooter, ElForm, ElFormItem, ElHeader, ElIcon, ElImage, ElInput, ElInputNumber, ElLink, ElMain, ElMenu, ElMenuItem, ElMenuItemGroup, ElOption, ElOptionGroup, ElPageHeader, ElPagination, ElPopconfirm, ElPopover, ElPopper, ElProgress, ElRadio, ElRadioButton, ElRadioGroup, ElRate, ElRow, ElScrollbar, ElSelect, ElSlider, ElStep, ElSteps, ElSubmenu, ElSwitch, ElTabPane, ElTable, ElTableColumn, ElTabs, ElTag, ElTimePicker, ElTimeSelect, ElTimeline, ElTimelineItem, ElTooltip, ElTransfer, ElTree, ElUpload,]export const plugins = [ ElInfiniteScroll, ElLoading, ElMessage, ElMessageBox, ElNotification,]批改 main.js 文件：
import { createApp } from 'vue'import App from './App.vue'import { components, plugins} from './utils/elementPlus.js'const app = createApp(App)components.forEach(component => { app.component(component.name, component)})plugins.forEach(plugin => { app.use(plugin)})app.mount('#app')最初，批改 components/HelloWorld.vue 文件，咱们把次要的元素放在页面上
<template> <div class="hello"> <h1>{{ msg }}</h1> <el-row> <el-button>默认按钮</el-button> <el-button type="primary">次要按钮</el-button> <el-button type="success">胜利按钮</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">正告按钮</el-button> <el-button type="danger">危险按钮</el-button></el-row><el-row> <el-button plain>奢侈按钮</el-button> <el-button type="primary" plain>次要按钮</el-button> <el-button type="success" plain>胜利按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>正告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button></el-row><el-row> <el-button round>圆角按钮</el-button> <el-button type="primary" round>次要按钮</el-button> <el-button type="success" round>胜利按钮</el-button> <el-button type="info" round>信息按钮</el-button> <el-button type="warning" round>正告按钮</el-button> <el-button type="danger" round>危险按钮</el-button></el-row><el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button></el-row> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h3 { margin: 40px 0 0;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style>扩大浏览：《最好用的 7 款 Vue 富文本编辑器》
Element Plus 卡拉云比照
Element Plus 是 Vue 3 的一个组件库，所以应用 Element Plus 首先要搭 Vue 3 开发环境，而后再引入 Element Plus，而后依照文档的阐明，依据本人的需要进行二次开发。应用 Element Plus 相对来说对前端技能要求较高。
卡拉云是新一代低代码开发平台，与 Element Plus 相比，卡拉云的劣势在于不必搭建 Vue 环境，间接注册即可开始应用。开发者齐全不必解决任何前端问题，只需简略拖拽，即可疾速生成所需组件，可一键接入包含 MySQL 在内的常见数据库及 API，依据疏导简略几步买通前后端，数周的开发工夫，缩短至 1 小时。
卡拉云搭建的数据看板 DEMO：https://my.kalacloud.com/apps/ykxauq3u6r/published
应用卡拉云 10 分钟内搭建的「天气预报数据看板」，简略拖拽，几行代码即可疾速实现，搭建即公布，可一键分享给其他同学一起应用。立刻注册应用卡拉云。
扩大浏览：
- 7 种最棒的 Vue Loading 加载动画组件测评与举荐
- 如何在 Vue 中退出图表 - Vue echarts 应用教程
- 最棒的 7 个 Laravel admin 后盾管理系统举荐
- 顶级好用的 5 款 Vue table 表格组件测评与举荐
- 12 款最棒 Vue 开源 UI 库测评 - 特地针对国内应用场景举荐
- Video.js 应用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器