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