Element Plus 介绍

一、认识Element Plus

---

Element-UI是基于vue实现的一套不依赖业务的UI组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。

• Element-UI：基于vue2版本
• Element-Plus：基于vue3版本

使用ElementPlus的三种方式：

1. 在HTML中以CDN包的形式导入
2. 下载JS文件保存到本地再导入
3. 使用npm安装，Vue项目使用该方法

import { createApp } from 'vue'
import App from './App.vue'
//导入element-plus组件以及css文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//将element plus引用到app实例中
const app = createApp(App)
app.use(ElementPlus)
createApp(App).mount('#app')

二、Element Plus基础组件

---

什么是Element Plus组件？带有el-前缀的标签

官方网站：

• Element Plus：https://element-plus.gitee.io/zh-CN/
• Element 组件：https://element-plus.gitee.io/zh-CN/component/button.html

使用方法：

1. Vue导入Element Plus
2. 在官方文档找到需要的样式组件
3. 复制代码到对应的.vue中
4. 修改为对应的数据

<template>
  <el-tag>Tag 1</el-tag>
  <el-tag class="ml-2" type="success">Tag 2</el-tag>
  <el-tag class="ml-2" type="info">Tag 3</el-tag>
  <el-tag class="ml-2" type="warning">Tag 4</el-tag>
  <el-tag class="ml-2" type="danger">Tag 5</el-tag>
</template>