vue3.0 引入element-plus

安装element-plus

  	npm install element-plus --save
  	yarn add element-plus

完整导入

//  main.js
	import { createApp } from 'vue'
	import ElementPlus from 'element-plus'
	import App from './App.vue'
	const app = createApp(App)
	// 在引入 Element Plus 时，可以传入一个包含 size 和 zIndex 属性的全局配置对象。 size 用于设置表单组件的默认尺寸，zIndex 用于设置弹出组件的层级，zIndex 的默认值为 2000
	app.use(ElementPlus, { size: 'small', zIndex: 3000 })

按需引入

//  main.js 
mport { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import httpRequest from '@/utils/httpRequest'  //  axios封装文件引入
import initElement from '@/element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
initElement(app)
app.config.globalProperties.$http = httpRequest
app.use(store).use(router).mount('#app')

//   src/element-plus/index.js
import {
  ElButton,
  ElPagination,
  ElDialog,
  ElAutocomplete,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElMenu,
  ElSubmenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElInput,
  ElInputNumber,
  ElRadio,
  ElRadioGroup,
  ElRadioButton,
  ElCheckbox,
  ElCheckboxButton,
  ElCheckboxGroup,
  ElSwitch,
  ElSelect,
  ElOption,
  ElOptionGroup,
  ElButtonGroup,
  ElTable,
  ElTableColumn,
  ElDatePicker,
  ElTimeSelect,
  ElTimePicker,
  ElPopover,
  ElTooltip,
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElForm,
  ElFormItem,
  ElTabs,
  ElTabPane,
  ElTag,
  ElTree,
  ElAlert,
  ElSlider,
  ElIcon,
  ElRow,
  ElCol,
  ElUpload,
  ElProgress,
  ElBadge,
  ElCard,
  ElRate,
  ElSteps,
  ElStep,
  ElCarousel,
  ElCarouselItem,
  ElCollapse,
  ElCollapseItem,
  ElCascader,
  ElColorPicker,
  ElTransfer,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain,
  ElFooter,
  ElLoading,
  ElMessageBox,
  ElMessage,
  ElNotification
} from 'element-plus'

export default (app) => {
  app.use(ElButton)
  app.use(ElPagination)
  app.use(ElDialog)
  app.use(ElAutocomplete)
  app.use(ElDropdown)
  app.use(ElDropdownMenu)
  app.use(ElDropdownItem)
  app.use(ElMenu)
  app.use(ElSubmenu)
  app.use(ElMenuItem)
  app.use(ElMenuItemGroup)
  app.use(ElInput)
  app.use(ElInputNumber)
  app.use(ElRadio)
  app.use(ElRadioGroup)
  app.use(ElRadioButton)
  app.use(ElCheckbox)
  app.use(ElCheckboxButton)
  app.use(ElCheckboxGroup)
  app.use(ElSwitch)
  app.use(ElSelect)
  app.use(ElOption)
  app.use(ElOptionGroup)
  app.use(ElButton)
  app.use(ElButtonGroup)
  app.use(ElTable)
  app.use(ElTableColumn)
  app.use(ElDatePicker)
  app.use(ElTimeSelect)
  app.use(ElTimePicker)
  app.use(ElPopover)
  app.use(ElTooltip)
  app.use(ElBreadcrumb)
  app.use(ElBreadcrumbItem)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElTabs)
  app.use(ElTabPane)
  app.use(ElTag)
  app.use(ElTree)
  app.use(ElAlert)
  app.use(ElSlider)
  app.use(ElIcon)
  app.use(ElRow)
  app.use(ElCol)
  app.use(ElUpload)
  app.use(ElProgress)
  app.use(ElBadge)
  app.use(ElCard)
  app.use(ElRate)
  app.use(ElSteps)
  app.use(ElStep)
  app.use(ElCarousel)
  app.use(ElCarouselItem)
  app.use(ElCollapse)
  app.use(ElCollapseItem)
  app.use(ElCascader)
  app.use(ElColorPicker)
  app.use(ElTransfer)
  app.use(ElContainer)
  app.use(ElHeader)
  app.use(ElAside)
  app.use(ElMain)
  app.use(ElFooter)
  app.use(ElLoading.directive)
  app.config.globalProperties.$loading = ElLoading.service
  app.config.globalProperties.$msgbox = ElMessageBox
  app.config.globalProperties.$alert = ElMessageBox.alert
  app.config.globalProperties.$confirm = ElMessageBox.confirm
  app.config.globalProperties.$prompt = ElMessageBox.prompt
  app.config.globalProperties.$notify = ElNotification
  app.config.globalProperties.$message = ElMessage
  app.config.globalProperties.$ELEMENT = { size: 'mini' }
}