Vue3配置Element Plus：引用下拉框代码但是下拉框不显示

前言

• 使用Vue3配置ElementPlus后，引用其下拉框的代码，项目运行后代码没有报错和警告，但是相关位置的下拉框没有显示出来。

• 根据Element Plus 官网的提示对其进行引入：
  

• src文件夹下，main.js中关于ElementPlus的引用内容如下：

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

// 引用插件
import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

createApp(App).use(store).use(router).mount('#app')

解决

• app.use(ElementPlus)
  app.use(ElementPlus)的作用是将ElementPlus实例注入到组件中，使组件可以访问ElementPlus中的状态和方法。

• 在该文件的底部已经有初始化时的那一行引入实例的代码，因此把对ElementPlus实例的注入并到最下面的代码去即可

• 修改代码：

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

// 引用插件
import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).use(store).use(router).mount('#app')

改完之后，下拉框就会显示出来了

总结

虽然是很愚蠢的小错误，但是小白刚上手vue的时候不可避免会在这些小细节上出错，因此记录一下供其他小白参考。