Vue3解决:[Vue warn]: Failed to resolve component: el-table(或el-button) 的三种解决方案

news2024/11/19 3:41:50

1、问题描述:

其一、报错为:

[Vue warn]: Failed to resolve component: el-table If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <App>
或者:
[Vue warn]: Failed to resolve component: el-button If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <App>

中文为:

[Vue warn]:无法解析组件:el-table 如果这是本机自定义元素,请确保通过compilerOptions.isCustomElement 将其从组件解析中排除。
或者:
[Vue warn]:无法解析组件:el-button 如果这是本机自定义元素,请确保通过compilerOptions.isCustomElement 将其从组件解析中排除。

其二、问题描述为:

想完整引入 ElementPlus ui 库,并想使用 el-tableel-button 等组件,却发现页面一直再 Vue warn,且在页面上一直显示不出来自己想要的结果;

其三、报错面显示为:

// 按道理将:已经引入了 el-button 组件和 el-table 组件,此时的 121 应该是有样式的;
在这里插入图片描述
在这里插入图片描述

2、问题分析:

其一、中文的报错信息:

显示的很清晰,无法解析组件,若是本机自定义元素,请确保通过compilerOptions.isCustomElement 将其从组件解析中排除;

其二、解决问题的思路:

A、第一种方式:
去掉 defineComponent ;

B、第二种方式:
查看下是否引入 ElementPlus 后,并没有在根节点上使用;

C、第三种方式:
成功引入 ElementPlus ,并在根节点上使用,但是使用在根组件的挂载之后了;

3、问题解决:

方式一:去掉 defineComponent :

// 没实测过,因为我使用 vue3 的代码风格不是如此;

其一、若代码形式如下:

<script>
import { defineComponent } from "vue";
import layaside from "./Aside";
export default defineComponent({
  components: {
    layaside,
  },
  setup() {
    return {};
  },
});
</script>

其二、修改为(即:去掉 defineComponent ):

<script>
import layaside from "./Aside";
export default {
  components: {
    layaside,
  },
  setup() {
    return {};
  },
};
</script>

方式二、添加使用 ElementPlus 的用法:

其一、项目生成后 main.js 里的代码为:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

其二、引入 ElementPlus 后,在 main.js 里的代码为:

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

/* 引入 ElementPlus */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).mount('#app')

其三、引入并使用 ElementPlus ,在 main.js 里的代码为(此时才是正确的目标代码):

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

/* 引入 ElementPlus */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);


app.use(ElementPlus)
app.mount('#app')

方式三、确保根组件的挂载是在使用 ElementPlus 之后(亲测,我的问题就是这样解决的);

其一、错误的代码示范(根组件的挂载ElementPlus 的使用之前):

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

/* 引入 ElementPlus */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);

app.mount('#app')
app.use(ElementPlus)    // 此时是错误的,控制台会告警报错;

其二、正确的代码(根组件的挂载ElementPlus 的使用之后):

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'

/* 引入 ElementPlus */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App);

app.use(ElementPlus)  // 此时 ElementPlus 的使用在根组件的挂载之前,是正确的;
app.mount('#app')

方式四:问题解决,组件正常使用:

通过方式一、方式二和方式三后,问题应该就解决了,此时的页面显示为:

// 此时的页面 el-button 样式及空数据的 el-table 样式展示出来了,并在控制台并没有警告或报错
在这里插入图片描述

4、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/699786.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络安全(黑客)自学

建议一&#xff1a;黑客七个等级 黑客&#xff0c;对很多人来说充满诱惑力。很多人可以发现这门领域如同任何一门领域&#xff0c;越深入越敬畏&#xff0c;知识如海洋&#xff0c;黑客也存在一些等级&#xff0c;参考知道创宇 CEO ic&#xff08;世界顶级黑客团队 0x557 成员&…

kubectl-ai:K8S资源清单的GPT助手

琦彦&#xff0c;在 **云原生百宝箱 **公众号等你&#xff0c;与你一起探讨应用迁移&#xff0c;GitOps&#xff0c;二次开发&#xff0c;解决方案&#xff0c;CNCF生态&#xff0c;及生活况味。 kubectl-ai 项目是一个kubectl使用 OpenAI GPT 生成和应用 Kubernetes 清单的插件…

【APP自动化测试必知必会】Appium之微信小程序自动化测试

本节大纲 H5 与小程序介绍 混合 App 元素定位环境部署 混合 App 元素操作 Airtest 测试 App 01.H5与小程序介绍 H5概述 H5 是指第 5 代 HTML &#xff0c;也指用 H5 语言制作的一切数字产品。 所谓 HTML 是“超文本标记语言”的英文缩写。我们上网所看到网页&#xf…

Oculus创始人谈Vision Pro:苹果在硬件设计、营销都做对了选择

早在Vision Pro正式发布之前&#xff0c;Oculus创始人Palmer Luckey就已经体验过早期版本&#xff0c;并给出了极高的评价。Luckey指出&#xff0c;苹果在XR头显上的策略是明智的&#xff0c;先打造出每个人预期中的头显&#xff0c;然后再去考虑如何让大家买得起。 Vision Pro…

远程控制电脑软件VNC安装使用教程:Windows系统

什么是VNC&#xff1f; VNC (Virtual Network Console)&#xff0c;即虚拟网络控制台&#xff0c;它是一款基于 UNIX 和 Linux 操作系统的优秀远程控制工具软件&#xff0c;由著名的 AT&T 的欧洲研究实验室开发&#xff0c;远程控制能力强大&#xff0c;高效实用&#xff…

【python】python编程基础

基础工具包 python 原生数据结构元组 Tuple列表 list集合 set字典 dictionary NumPy 数据结构数组 Ndarray矩阵 Matrix Pandas 数据结构序列 Series &#xff08;一维&#xff09;数据框 DataFrame &#xff08;二维&#xff09; Matplotlib 数据可视化绘制饼图绘制折线图绘制直…

《Linux操作系统编程》 第六章 Linux中的进程监控: fork函数的使用,以及父子进程间的关系,掌握exec系列函数

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

一文读懂高分文章必备分析-GSEA

Gene Set Enrichment Analysis 或称 GSEA&#xff0c;是一种常用于转录组基因表达分析的数据挖掘技术&#xff0c;已经在《nature》、《Cell》、《ISME》、《Molecular Cell》、《Bioactive Materials》等高分杂志中发表多篇文章&#xff0c;涉及转录组及多组学内容。 凌恩生物…

yxcms存储型XSS至getshell 漏洞复现

为方便您的阅读&#xff0c;可点击下方蓝色字体&#xff0c;进行跳转↓↓↓ 01 环境部署02 漏洞配置03 利用方式04 修复方案 01 环境部署 &#xff08;1&#xff09;yxcms yxcms 基于 PHPMySQL 开发&#xff0c;这是一个采用轻量级 MVC 设计模式的网站管理系统。轻量级 MVC 设…

13-Cookie、Session、Token

目录 1.前置知识——HTTP协议 1.1.HTTP 的主要特点有以下 5 个&#xff1a; 1.2.HTTP 组成 1.3.为什么会有Cookie、Session、Token&#xff1f; 2.Cookie 3.Session PS&#xff1a;Cookie 和 Session 的联系与区别 4.Token 4.1.token的组成 4.2.token是如何生成的&am…

【广州华锐互动】VR航天航空体验展厅提供沉浸式的展示效果

VR航天航空体验展厅是一种基于虚拟现实技术的在线展览形式&#xff0c;它通过模拟真实的太空环境&#xff0c;为用户提供了一种身临其境的参观体验。与传统的线上展览相比&#xff0c;VR航天航空体验展厅具有以下几个特色&#xff1a; 1.沉浸式体验&#xff1a;VR航天航空体验…

史上最详细的webrtc-streamer访问摄像机视频流教程

目录 前言 一、webrtc-streamer的API 二、webrtc-streamer的启动命令介绍 1.原文 2.译文 三、webrtc-streamer的安装部署 1.下载地址 https://github.com/mpromonet/webrtc-streamer/releases 2.windows版本部署 3.Linux版本部署 四、springboot整合webrtc-streamer …

技术不断变革,亚马逊云科技中国峰会引领企业重塑业务

过去十年&#xff0c;数字化转型的浪潮携带着机遇和挑战席卷而来&#xff0c;几乎每个企业都在做数字化转型&#xff0c;开始向大数据、人工智能等新技术寻求生产力的突破。但随着数字化转型深入&#xff0c;很多企业开始感受到数字化投入的成本压力&#xff0c;加之新技术正带…

Alibi:Attention With Linear Biases Enables Input Length Extrapolation

Alibi:Attention With Linear Biases Enables Input Length Extrapolation IntroductionMethodResult参考 Introduction 假设一个模型在512token上做训练&#xff0c;在推理的时候&#xff0c;模型在更长的序列上表现叫做模型的外推性。作者表明以前的位置编码如Sin、Rotary、…

JS 数据变化监听函数封装

文章目录 监听函数使用用例重复添加函数&#xff0c;只有最后一个监听函数有效 监听函数 /*** 监听函数* param {对象} vm * param {键值} key * param {触发函数} action */ function WatchValueChange(vm, key, action) {var val vm[key]Object.defineProperty(vm, key, {e…

阿里内部流传出来的《1000 道互联网大厂 Java 工程师面试题》来袭,面试必刷,跳槽大厂神器

眼看着"金九银十"也快到来了&#xff0c;很多小伙伴都蠢蠢欲动想要刚给自己涨一波薪资&#xff1b;面试作为涨薪最直接最有效的方式&#xff0c;我们需要花费巨大的精力和时间来准备。除了自身的技术积累之外&#xff0c;掌握一定的面试技巧和熟悉最常见的面试题&…

掌握imgproc组件:opencv-图像轮廓与图像分割修复

图像轮廓与图像分割修复 1.查找并绘制轮廓1.1 寻找轮廓&#xff1a;findContours()函数1.2 绘制轮廓&#xff1a;drawContours()函数1.3 案例程序&#xff1a;轮廓查找 2. 寻找物体的凸包2.1 凸包2.2 寻找凸包&#xff1a;convexHull()函数2.3 案例&#xff1a;寻找和绘制物体的…

【前端|CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器

欢迎来到CSS零基础入门系列的第一篇博客&#xff01;在这个系列中&#xff0c;我们将一起学习CSS&#xff08;层叠样式表&#xff09;的基础知识&#xff0c;探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器&#xff0c;帮助你理解CSS的核心概念。 1.…

MAYA活塞(使用骨骼)

复制骨骼 P父子关系 创建组

根据数组中对象的某个字段分组最简洁方式

使用map数据结构的&#xff0c;键值唯一性进行操作 //根据年龄分组&#xff0c;获取目标数据格式//[{key:key,data:[{}]}]//{key:[]}const arr [{ name:test1,age:10},{ name:test2,age:20},{ name:test3,age:10},{ name:test4,age:20},{ name:test5,age:10},{ name:test6,age…