Element Plus 在Vue3.0按需导入

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')

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]

 

因为不熟悉Element Plus 配置刚开始导入的时候很长时间都不生效 再次记录