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 配置剛開始導入的時候很長時間都不生效 再次記錄