乐趣区

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

jiezi

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