問題：vue3中使用element-plus的圖標無法正常顯示

一、問題描述

根據element-plus官網方式編寫並無法展示圖標！！

element-plus官網地址： https://element-plus.gitee.io/#/zh-CN/component/installation

    <el-button type="primary">
      <el-icon :size="size" :color="color">
        <edit></edit>
      </el-icon>
      <edit></edit>
    </el-button>

 

二、解決方案

 在查看了大神們的博客之后發現基本有兩種解決方案

1.將圖標的使用方法轉變為組件化的使用

<template>
  <div>
    <!-- 按鈕里面的圖標 -->
    <el-button type="primary">
      <el-icon :size="size" :color="color">
        <edit></edit>
      </el-icon>
    </el-button>
    <!-- 單純的圖標 -->
    <edit></edit>
  </div>
</template>
<script>
import { Edit } from "@element-plus/icons-vue";

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  components: {
    Edit,
  },
};
</script>

 

 

 

2.利用setup語法糖

這個方案我不僅沒有解決問題，還出現了相關問題！我實在不知道怎么使用，沒有找到合適的解決方案。在此請教一下大神們~

添加----要想使用step語法糖的話需要利用vite create 項目