一个Vue3框架 | Element Plus

        安装Element UI（现已更名为Element Plus，针对Vue 3）或Element（针对Vue 2）组件库到你的Vue项目中，主要依赖于你使用的Vue版本。下面我将介绍我如何在我的项目中安装Element。

一、安装element组件

        使用npm：打开终端命令提示符，然后定位到你的Vue目录下。可以运行以下命令来安装element：

npm install element-plus --save

二、导入element组件

        在你的main.js或main.ts文件中，你需要引入Element Plus并告诉Vue 3使用它。这通常涉及到引入Element Plus的CSS文件和JavaScript文件，并使用Vue.use()方法（对于Vue 3，这实际上是Vue.app.use()，但通常通过创建Vue应用实例时传入插件来完成）。

import './assets/main.css'

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组件我们来写一个简单的边框测试以下效果。在 Vue 3 的 <script setup> 语法中，可以正确地引入了来自 @element-plus/icons-vue 的多个图标组件，包括 Check、Delete、Edit、Message、Search 和 Star。这些图标组件可以用于在你的 Vue 组件中显示图标，提升用户界面（UI）的可视化效果。这里我只引用了"编辑"和"修改"。

<script setup>
import {
  //Check,
  Delete,
  Edit,
  //Message,
  //Search,
  //Star,
} from '@element-plus/icons-vue'
</script>

        以下我使用了 Element UI 的 <el-table> 组件来展示数据，并且包含了一个操作列，其中放置编辑和删除按钮。

<template>
  <div>
    <el-table :data="[{
      id:1,
      name:'Tom',
      age:20
    }]" border>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="name" prop="name"></el-table-column>
      <el-table-column label="age" prop="age"></el-table-column>
      <el-table-column label="操作" width="200">
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="danger" :icon="Delete" circle />
      </el-table-column>
    </el-table>
  </div>
</template>

        以下是运行结果

注意：

①、Element UI是为Vue 2设计的，Vue 3用户应该使用Element Plus。

②、确保你安装的版本与你的Vue版本兼容。

③、引入Element或Element Plus的CSS文件是为了使用其样式。

④、在Vue 3中，Vue.use()的调用方式略有不同，因为Vue 3采用了Composition API和新的应用创建方式。

⑤、查阅Element或Element Plus的官方文档，以获取更多关于组件、API和最佳实践的详细信息。官方网站请参考

一个 Vue 3 UI 框架 | Element Plus