Vue3中使用Element Plus时el-icon无法显示的问题解决

目录
  • 问题描述
  • 解决方案
  • 总结

问题描述

按照官方文档安装了icons

$ npm install @element-plus/icons

然后在页面中使用

<template>
  <!-- <Header /> -->
  <!-- Icon 图标 -->
  <el-icon><edit /></el-icon>
  <el-icon><fold /></el-icon>
  <el-icon><aim /></el-icon>
  <!-- SVG 图标 -->
  <edit style="width: 1em; height: 1em; margin-right: 8px" />
  <share style="width: 1em; height: 1em; margin-right: 8px" />
  <delete style="width: 1em; height: 1em; margin-right: 8px" />
  <search style="width: 1em; height: 1em; margin-right: 8px" />
</template>

无法显示：

runtime-core.esm-bundler.js?5c40:6584 
        
 [Vue warn]: Failed to resolve component: edit
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>

解决方案

添加引用

<script>
//组件script
import { Fold } from "@element-plus/icons";
import { Edit } from "@element-plus/icons";
import { Aim } from "@element-plus/icons";
import { Share } from "@element-plus/icons";
import { Search } from "@element-plus/icons";
import { Delete } from "@element-plus/icons";
export default {
  components: {
    Fold,
    Edit,
    Aim,
    Share,
    Search,
    Delete,
  },
  data() {
    return {
    };
  },
};
</script>

显示正常了。

总结

到此这篇关于Vue3中使用Element Plus时el-icon无法显示问题解决的文章就介绍到这了,更多相关Vue3中el-icon无法显示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3.0之引入Element-plus ui样式的两种方法

    Vue3.0之引入Element-plus ui样式的两种方法

    目录 第一种:CDN 第二种:通过 npm 安装,并希望配合 webpack 使用 安装:官网欢迎star:github npm install element-plus --save 第一种:CDN 目前可以通过 unpkg.com/element-plus 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用.<! – 引入样式 -->< link rel=“stylesheet” href=“https://unpkg.com/element-plus/lib/t

  • Vue3+elementui plus创建项目的方法

    1.使用elementui plus版本实现按需加载组件会报错 Error: Cannot find module 'babel-preset-es2015' from 'D:\danzhukeji\danzhu\my_pp\src' 这样的情况下 { "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { &

  • Vue3中使用Element Plus时el-icon无法显示的问题解决

    Vue3中使用Element Plus时el-icon无法显示的问题解决

    目录 问题描述 解决方案 总结 问题描述 按照官方文档安装了icons $ npm install @element-plus/icons 然后在页面中使用 <template> <!-- <Header /> --> <!-- Icon 图标 --> <el-icon><edit /></el-icon> <el-icon><fold /></el-icon> <el-icon&

  • vue中使用element组件时事件想要传递其他参数的问题

    在使用element的上传组件时在一下几个钩子中传递其他参数 图中是文件上传时的几个钩子,参数为文件或文件列表或者其他参数,但是现在我想在原有参数上传递其他参数.比如我想在on-success的钩子中传递一个自定义参数i,原本是这样写的: :on-success="handleSuccess(i)" //handleSuccess是一个方法 但是发现这样写取不到自身原来的参数,后来在网上找到了一个比较好的方法,如下: :on-success="(value)=> han

  • Vue3中element-plus全局使用Icon图标的过程详解

    目录 1.安装图标库 2.注册 3.在组件中直接使用 4.在el-menu组件中动态使用 总结 Vue项目中使用Element-plus的Icon图标,包括按钮和动态菜单 1.安装图标库 npm install @element-plus/icons 2.注册 main.ts文件中引入并注册 import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' impo

  • vue3中element-plus icon图标的正确使用姿势

    vue3中element-plus icon图标的正确使用姿势

    目录 前言: 改变: 错误使用: 正确使用: setup script扩展 更新 总结 前言: 为了适应vue3的更新,element组件也将其内容升级为了plus用以配套的使用,很多组件新增了更加多元的功能,但我用的时候就觉得那个icon图标,怎么变得特别难用呢?原来是没有掌握正确的使用方法 改变: // 原来 <i class="el-icon-edit"></i> // plus <el-icon :size="size" :co

  • vue3.0中使用element的完整步骤

    vue3.0中使用element的完整步骤

    前言: 在vue3.0中使用element框架,因为element是支持vue2.0的,他推出的支持vue3.0的版本叫 element-plus 官网入口:点我进入 一.个人遇到的问题与解决办法: 遇到的问题: 我直接用cnpm  i element-plus -S 装的版本,不知道为啥,一直报错 图1,版本型号 图2 ,我的代码中使用图3 解决办法: 我把package.json中的element-plus的版本更换成    下面这句话,解决了问题(是否为最新版本问题,还在求证中) "ele

  • vue3.0中使用element UI表单遍历校验问题解决

    vue3.0中使用element UI表单遍历校验问题解决

    问题 在使用vue3.0写项目的时候遇到一个需要遍历的表单,可以增加删除表单对象 不考虑校验问题的话,就是简单的数组包form对象.涉及校验的时候,按照以往的写法就是绑定ref值,然后调用组件的validate方法[form表单中配置rule规则]. 解决方法就是将数组内嵌在一个对象中,对象的结构跟我们定义的form对象结构一致 //我们需要遍历的form对象数组 const arr = [ { name:'', sex:'', age:'', },{ name:'', sex:'', age:

  • vue3中的对象时为proxy对象如何获取值(两种方式)

    目录 第一种获取target值的方式: 第二种获取target值 PS:vue3中获取proxy包裹的数据 前言 一.具体问题 二.解决办法 使用vue3.0时,因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象,Proxy对象里边的[[Target]]才是真实的对象. 第一种获取target值的方式: 通过vue中的响应式对象可使用 toRaw() 方法获取原始对象 //第一种获取target值的方式,通过vue中的响应式对象可使用toRaw()

  • vue3.0安装Element ui及矢量图使用方式

    vue3.0安装Element ui及矢量图使用方式

    在此只关注v3的安装及使用,如果想了解v2可移步到其官网:https://element.eleme.io/#/zh-CN/component/installation v3官网:https://element-plus.org/zh-CN/guide/installation.html 使用element ui时vue2和vue3的区别 安装命令 main.js中引入文件有所不同 使用icon时v2不需要安装,v3需安装 v2和v3在vue文件中使用icon时编写方式有所不同 icon在v2中

  • Template ref在Vue3中的实现原理详解

    目录 背景 模板的编译 setup 函数返回值的处理 组件的渲染 Template Ref 的注册 总结 背景 最近我的 Vue3 音乐课程后台问答区频繁出现一个关于 Template ref 在 Composition API 中使用的问题,于是我就想写一篇文章详细解答这个问题. 先来看一个简单的例子: <template> <div ref="root">This is a root element</div> </template>

  • 详解Vue3中对VDOM的改进

    前言 vue-next 对virtual dom的patch更新做了一系列的优化,从编译时加入了 block 以减少 vdom 之间的对比次数,另外还有 hoisted 的操作减少了内存的开销.本文写给自己看,做个知识点记录,如有错误,还请不吝赐教. VDOM VDOM的概念简单来说就是用js对象来模拟真实DOM树.由于MV**的架构,真实DOM树应该随着数据(Vue2.x中的data)的改变而发生改变,这些改变可能是以下几个方面: v-if v-for 动态的props(如:class,@cl

随机推荐