element-plus

前言

上文使用了vue3作为大事件文章管理的前端编写框架，但是对于html元素，现在刚好有组件库，因此本文介绍初学element-plus

Element

Element：是饿了么团队研发的，基于 Vue 3，面向设计师和开发者的组件库。

组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等等。

官网：https://element-plus.org/zh-CN/#/zh-CN

上图是使用element组件和不使用的对比

Element Plus快速入门

准备工作：

• 创建一个工程化的vue项目
• 参照官方文档，安装Element Plus组件库（在当前工程的目录下）：npm install element-plus --save
• main.js中引入Element Plus组件库（参照官方文档）

import { 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')

制作组件：

• 访问Element官方文档，复制组件代码
• 调整

常用组件

官网有对应格式的组件，以及代码，直接使用即可，方便快捷，美观大方