乐趣区

关于vue.js:Element-Plus-for-Vue-3-入门教程

本文首发:《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-plus
cd 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 视频播放器
退出移动版