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-icon :size="20" style="color: #ffffff;">

　　　　　　  <Edit />

　　　　  </el-icon>

 

　　　　  <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引入成功。

 

__EOF__

本文作者：我命倾尘
本文链接：https://www.cnblogs.com/guobin-/p/17779933.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！