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