ElementUI

 ElementUI 它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库，简化了常用组件的封装，降低开发难度。

Element-UI 和 Element-Plus 的区别

Element-UI 组件的升级版（3.x）是 Element-Plus；

Element-UI 对应 Element2：基本不支持手机版，适用于Vue2 框架

Element-Plus 对应 Element3：组件布局考虑了手机版展示，适用于 Vue3 框架

具体安装步骤 ：

Vue 3 - Element Plus 官方

1. 安装 Element  plus：

npm install element-plus --save

注意：有些 npm 版本过高或者过低的时候下载Echarts的过程中可能会报错，遇到这种问题可以在后面加上 --legacy-peer-deps  ;  在安装时，一定要先使用 cd 命令进入到项目文件夹！！！

npm install element-plus --S --legacy-peer-deps

2. 判断 Element  plus 是否安装成功

查看配置文件 package.json，是否有element-plus组件的版本号

3. 引入 Element  plus 样式文件

在 main.js 文件夹里配置 Element  plus 样式文件

// 原生组件配置文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Element  plus 配置文件
import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
// 这里添加 use(ElementPlus, { locale })
createApp(App).use(store).use(router).use(ElementPlus, { locale }).mount('#app')

4. 使用 Element  plus 创建一个表格示例

代码如下：

<template>
 <!-- 原生界面代码 -->
 <div class="about">
   <h1>This is an about page</h1>
   <!-- 表格组件主要代码  -->
   <el-table style="width: 60%;margin: 0 auto">
     <el-table-column label="Date"/>
     <el-table-column label="Name"/>
     <el-table-column label="Address"/>
   </el-table>
 </div>
</template>

@筑坐极