vue3解决[Vue warn]: Failed to resolve component:XXX

最近学习vue3，对于一个后端来说坑好多啊，头炸了！！！

即使坑一个接一个的，填就完了！！！

在解决完 ‘VueRouter‘、vue-router未找到 ， this.$router未定义的问题后，之前还生效的ElementPlus突然无法识别了。

已经在main.js全局引入了ElementPlus，但是浏览器报警告无法识别ElementPlus

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from "axios";
import router from './router'

const app = createApp(App).use(router,axios,ElementPlus)

app.mount('#app')

然后找到两个解决办法

一、使用按需引入

<script>
import { ElButton } from 'element-plus'
export default {
  components: { ElButton }
}
</script>

如果是组合式API，有稍微不同

<script setup>

import { ElButton } from 'element-plus'

components: {
  ElButton
}

</script>

二、使用自动引入（  推荐！！！）

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 vue.config.js 或 Vite 或 Webpack 的配置文件中、

（Vue 项目中 vue.config.js 文件就等同于 webpack 的 webpack.config.js）

vue.config.js 和 Webpack#

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 
module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

Vite#

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})