一、引入element-plus
element-ui只支持vue2,vue3需要引入element-plus进行使用,两个分别对应vue2和3两个版本,各自独立,无法跨级兼容。
地址:https://element-plus.gitee.io/
在vue3项目终端里使用以下命令引入该依赖:
npm install element-plus --save
二、修改main.ts配置
import引入以下内容:
// 引入element-plus依赖 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css'
对组件进行全局注册:
// 引入element-plus依赖 app.use(ElementPlus)
三、使用测试
创建一个简单的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引入成功。
标签:Vue,import,value,element,plus,vue3,引入,ui,js From: https://www.cnblogs.com/guobin-/p/17779933.html