Vue.js框架:vue3版本引入使用element-ui和配套图标
一、引入element-plus
element-ui只支持vue2,vue3需要引入element-plus进行使用,两个分别对应vue2和3两个版本,各自独立,无法跨级兼容。
地址:https://element-plus.gitee.io/
在vue3项目终端里使用以下命令引入该依赖:
npm install element-plus --save
二、引入
element-plus组件库目前没有包含icon组件,需要单独安装使用。
在终端使用以下命令进行安装:
npm install @element-plus/icons-vue
三、修改main.ts配置
import引入以下内容:
// 引入element-plus依赖
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入element-plus里的图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
对组件进行全局注册:
// 引入element-plus依赖
app.use(ElementPlus)
// 引入element-plus里的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
四、使用测试
创建一个简单的el-table表格:
<script setup lang="ts">
import { reactive } from 'vue';
let testTable = reactive([
{ name: "测试数据列1", value: "200", remark: "备注1", },
{ name: "测试数据列2", value: "250", remark: "备注2", },
{ name: "测试数据列3", value: "100", remark: "备注3", }
]);
</script>
<template>
<el-table :data="testTable" max-height="200px">
<el-table-column prop="name" label="名称" width="150"></el-table-column>
<el-table-column prop="value" label="数值" width="150"></el-table-column>
<el-table-column prop="remark" label="备注" width="150"></el-table-column>
</el-table>
</template>
运行结果如下:
正常显示无报错,说明element-plus引入成功。