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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐