记录vue3.0项目中使用elementPlus按需加载

main.ts文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// Element Plus
import 'element-plus/lib/theme-chalk/index.css'
import { components, plugins } from './plugins/element'

// 创建App实例
const app = createApp(App) 

// 按需导入Element Plus组件和插件
components.forEach(component => {
  app.component(component.name, component)
})
plugins.forEach(plugin => {
  app.use(plugin)
})

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

src下新建plugins文件夹

element.ts文件
import { ElMenu, ElMenuItem, ElSlider, ElSubMenu, ElButton, ElMessageBox } from 'element-plus'
export const components: any[] = [
  ElMenu,
  ElMenuItem,
  ElSlider,
  ElSubMenu,
  ElMenuItem,
  ElButton
]
export const plugins: any[] = [ElMessageBox]

这样就是实现了按需加载,避免了不必要的组件引入