Vue3报错：Failed to resolve component: xx If this is a native custom element, make sure to exclude it

报错为

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

如下图：

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

解决办法

方式一、正确添加使用 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')复制

很多同学都是刚开始学vue 写成了

const app =createApp(App);
app.use(ElementPlus);
createApp(App).mount('#app')//这样写是不对的复制

还有这么写的

const app = createApp(App);
app.mount('#app')
app.use(ElementPlus)    // 此时也是错误的，F12控制台会告警报错；复制

这样写 ElementPlus 的使用在根组件的挂载之后，是不对的

方式二：去掉 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>复制

总结

本人是方式一解决，哪里有不对或不合适的地方，还请大佬们多多指点