Element Plus for Vue 3 入门教程

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年08月29日

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/element/blob/dev/README.md

老 Element 项目是否可以平滑升级到 Vue 3 + Element Plus ?

Vue 从 2 到 3 的升级,本身就有部分 API 进行了调整,Element Plus 作为 Vue 3 的第三方库,也不可避免的在这些更新的细节上也进行了对应的修改。所以老项目升级到全新的 Element Plus 这些适配 Vue 3 的部分也就跟随一起要做简单的变动。不过大家不用担心,整体变动并不大。

vue-element-plus-website

Element Plus 相关生态

更多顶级 Vue 3 开源 UI 库测评,请看这篇:《12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐

调试 Element Plus 太麻烦?

试试卡拉云,拖拽生成组件,极速连接 API 和数据库,直接生成后台工具,将两个月的工期降低至两天

有关 Element Plus 与低代码开发工具卡拉云的对比测评,请见本文文尾。

怎么安装、引入 Element Plus?

vue-element-plus

上图为跟随本教程搭建的 Element Plus 完成界面

创建 Vue 3 环境和新项目

vue create element-plus
cd element-plus

选择 vue 3 让他自动安装,然后 cd 到 element-plus 项目目录,接下里的操作都在这个目录里完成。

使用 vue add 自动帮你选择适配的版本

vue add element-plus

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 相对来说对前端技能要求较高。

新一代低代码开发工具「卡拉云」全面解决前后端开发繁杂,避免重复造轮子的问题。开发者无需懂前后端,只需要拖拽前端组件,填表进入数据库 / API ,帮你解决前后端全栈问题, 1 小时快速开发后台管理系统。

(1)卡拉云是什么?

卡拉云是新一代企业级低代码开发平台,与Element UI 、 iView UI 不同,几乎不用写代码,开箱即用。卡拉云把后台管理系统抽象成三个部分:「前端组件」+「后端数据源」+「连接组件与数据源的简单代码」,开发者不需要写复杂的代码,甚至可以不懂前端开发,也可以快速搭建「CRM、ERP、CMS、MES 」等后台管理工具。

在卡拉云搭建后台管理工具时,前端只需要拖拽即可生成组件,复杂的表格、多样的图表、繁琐的表单、功能强大的富文本编辑器等常用的前端组件,卡拉云都已经帮开发者 Set 好了;后端也无需开发者操心,简单填写配置表,即可接入MySQL、SQL Server 等常见的数据库 和 Restful API 、飞书、小程序、企业微信等数据源。开发者只需要专注业务逻辑的开发,其他一切卡拉云全部帮开发者处理好,是真正意义的低代码开发平台。

kalacloud

(2)卡拉云怎么样,评价如何?

只要使用过卡拉云的开发者都能体会到它的绝妙。在卡拉云接上数据源,拖拽一个组件,把他们连起来,这一刻,任何人都会眼前一亮,感叹怎么能有这么好用的开发工具!

kalacloud-ui.jpg

卡拉云把后台管理系统抽象成「前端组件」+「后端数据源」+「连接组件与数据源的简单代码」三个部分。

「前端组件」部分,开发者甚至不需要懂前端,直接拖拽,即可生成前端组件。卡拉云内置了几乎所有常见的前端组件,特别是比较复杂的表格、表单、图表、富文本、查询等,这些组件卡拉云已经调校的非常出色,开发者无需自己调试,接上数据即可使用。

kalacloud-sql-api

「后端数据」部分,开发者不需要自己搭建后端,直接填个配置表就可以连上常见的数据库(MySQL、SQL Server 等)、API(钉钉、飞书、企业微信等开放 API 的工具均可连接),帮助企业打通信息孤岛,用卡拉云把所有数据连接起来,集中处理。

01-kalacloud-table.gif

「组件与数据的关联」部分,开发者只需要会简单的 JS / SQL 用一行代码就能在前端把后端数据和组件关联起来,如此简单却又不损失搭建的灵活性是卡拉云最神奇的地方。

卡拉云与其他前端框架不同,最大的不同是开发策略不同,多数快速开发平台采用开源的市场策略,依靠开发者自愿贡献,同时提供服务而盈利。而卡拉云则是采用成本较高的自研策略,努力保证高可用性和高安全性。当然,两种策略各有优势,选择开源的快速开发平台,适合喜欢自己亲力亲为的用户,卡拉云适合不想处理任何技术细节,只想安全高效的把业务系统搭出来,快速交付使用的企业级用户。

扩展阅读: