vue3.0 引入element-plus

vue3.0 引入element-plus

1. 安装element-plus

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

2. 完整导入

   //  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 })
   

3. 按需引入

   //  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' }
   }