脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3无法显示element-plus

vue3无法显示element-plus问题及解决

 更新时间：2024年03月20日 15:27:09   作者：SwaryLA  
这篇文章主要介绍了vue3无法显示element-plus问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3无法显示element-plus

原本想使用el-tree做目录，结果找了很久的原因都无法显示，并且没有任何报错，但是在调试的过程中发现el-tree使用的数据是对象形式的

并且还报了el-tree组件无法解析

runtime-core.esm-bundler.js:38 [Vue warn]: Failed to resolve component: el-tree If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

刚开始以为需要解析数据，但是其他人都可以正常使用，所以尝试放其他组件，结果其他组件也都无法使用，那么很有可能是挂载出现问题

因为将所有需要挂载使用的变量放在了一个use里导致的，还是得多熟悉才行

正确使用方法

vue3使用Element-plus的图标

首先安装Element-Plus-icon

# 选择一个你喜欢的包管理器
 
# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

如何使用

Element-Plus-icon官方文档链接

https://element-plus.org/zh-CN/component/icon.html#icon-collection

在main.ts中引入Element-Plus-icon

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
Object.keys(ElementPlusIconsVue).forEach((key) => {
    app.component(key, ElementPlusIconsVue[key])
})
  • 第一种直接点击图标复制<el-icon>
<el-icon><ArrowRight /></el-icon>
  • 第二种通过icon="el-icon-plus" 
<el-button type="success" icon="el-icon-plus" >
    1111
</el-button>
  • 第三种通过SVG
<template>
  <div style="font-size: 20px">
    <!-- 由于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" />
  </div>
</template>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Ant Design moment对象和字符串之间的相互转化教程

    Ant Design moment对象和字符串之间的相互转化教程

    这篇文章主要介绍了Ant Design moment对象和字符串之间的相互转化教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • VueJS如何引入css或者less文件的一些坑

    VueJS如何引入css或者less文件的一些坑

    本篇文章主要介绍了VueJS如何引入css或者less文件的一些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Vue+Elementui el-tree树只能选择子节点并且支持检索功能

    Vue+Elementui el-tree树只能选择子节点并且支持检索功能

    这篇文章给大家介绍了Vue+Element UI el-tree树只能选择子节点并且支持检索的文章,通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-12-12
  • vue与TypeScript集成配置最简教程(推荐)

    vue与TypeScript集成配置最简教程(推荐)

    本篇文章主要介绍了vue与TypeScript集成配置最简教程(推荐)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue项目添加前缀,ngnix发布相关修改问题

    Vue项目添加前缀,ngnix发布相关修改问题

    这篇文章主要介绍了Vue项目添加前缀,ngnix发布相关修改问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue-cli3.0如何使用CDN区分开发、生产、预发布环境

    vue-cli3.0如何使用CDN区分开发、生产、预发布环境

    这篇文章主要介绍了vue-cli3.0如何使用CDN区分开发、生产、预发布环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 跟混乱的页面弹窗说再见

    跟混乱的页面弹窗说再见

    这篇文章主要介绍了跟混乱的页面弹窗说再见，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue中$nextTick的用法讲解

    vue中$nextTick的用法讲解

    今天小编就为大家分享一篇关于vue中$nextTick的用法讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue+element tabs选项卡分页效果

    vue+element tabs选项卡分页效果

    这篇文章主要为大家详细介绍了vue+element tabs选项卡分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue内置动态组件component使用示例小结

    vue内置动态组件component使用示例小结

    component是vue内置组件,主要作用为动态渲染组件,这篇文章主要介绍了vue内置动态组件component使用示例小结,需要的朋友可以参考下
    2024-03-03

最新评论