Complete steps to use element in vue3.0

Preface:

Use the element framework in vue3.0, because element supports vue2.0, and the version that supports vue3.0 is called element-plus

Official website entrance: Click here to enter

1. Personal problems and solutions:

Problems encountered:

I installed the version directly using cnpm i element-plus -S. I don't know why, but it keeps reporting the error Figure 1, the version model Figure 2, and my code uses Figure 3

Solution:

I changed the version of element-plus in package.json to the following sentence, which solved the problem (whether it is the latest version problem is still being verified)

"element-plus": "^1.0.1-alpha.19",

2. Specific Use

1. Global introduction:

Install cnpm i element-plus -S

Add to main.js:

import 'element-plus/lib/theme-chalk/index.css'
import ElementPlus from 'element-plus'
 
const app = createApp(App)
app.use(ElementPlus)
app.use(store).use(router).mount('#app')

Normal use on the page

2. Import on demand:

(1) Install cnpm i element-plus -S

(2) Add a new folder plugins and create a new configuration file element.js

import {
 // ElAlert,
 ElAside,
 // ElAutocomplete,
 // ElAvatar,
 // ElBacktop,
 // ElBadge,
 // ElBreadcrumb,
 // ElBreadcrumbItem,
 ElButton,
 // ElButtonGroup,
 // ElCalendar,
 // ElCard,
 // ElCarousel,
 // ElCarouselItem,
 // ElCascader,
 // ElCascaderPanel,
 // ElCheckbox,
 // ElCheckboxButton,
 // ElCheckboxGroup,
 // ElCol,
 // ElCollapse,
 // ElCollapseItem,
 // ElCollapseTransition,
 // ElColorPicker,
 ElContainer,
 // ElDatePicker,
 // ElDialog,
 // ElDivider,
 // ElDrawer,
 ElDropdown,
 ElDropdownItem,
 ElDropdownMenu,
 // ElFooter,
 ElForm,
 ElFormItem,
 ElHeader,
 // ElIcon,
 // ElImage,
 ElInput,
 // ElInputNumber,
 // ElLink,
 ElMain,
 ElMenu,
 ElMenuItem,
 ElMenuItemGroup,
 // ElOption,
 // ElOptionGroup,
 // ElPageHeader,
 // ElPagination,
 ElPopconfirm,
 // ElPopover,
 ElPopper,
 // ElProgress,
 // ElRadio,
 // ElRadioButton,
 // ElRadioGroup,
 // ElRate,
 // ElRow,
 // ElScrollBar,
 // ElSelect,
 // ElSlider,
 // ElStep,
 // ElSteps,
 ElSubmenu,
 // ElSwitch,
 ElTabPane,
 ElTabs,
 // ElTable,
 // ElTableColumn,
 // ElTimeline,
 // ElTimelineItem,
 ElTooltip,
 // ElTransfer,
 // ElTree,
 // ElUpload,
 // ElInfiniteScroll,
 // ElLoading,
 // ElMessage,
 ElMessageBox,
 ElNotification
} from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale'
 
export default (app) => {
 locale.use(lang)
 app.use(ElButton)
 app.use(ElNotification)
 app.use(ElContainer)
 app.use(ElAside)
 app.use(ElHeader)
 app.use(ElMain)
 app.use(ElDropdown)
 app.use(ElDropdownItem)
 app.use(ElDropdownMenu)
 app.use(ElTabPane)
 app.use(ElTabs)
 app.use(ElMenu)
 app.use(ElMenuItem)
 app.use(ElMenuItemGroup)
 app.use(ElSubmenu)
 app.use(ElTooltip)
 app.use(ElPopper)
 app.use(ElPopconfirm)
 app.use(ElMessageBox)
 app.use(ElInput)
 app.use(ElForm)
 app.use(ElFormItem)
}

(3) Configuration in main.js

(4) Just use it as normal like element

Summarize

This is the end of this article about the use of element in vue3.0. For more relevant content about the use of element in vue3.0, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Use the vue-element-admin framework to dynamically obtain the menu function from the backend
Vue+elementUI component recursively implements foldable dynamic rendering multi-level sidebar navigation
Example code of vue + element ui to realize player function
Analysis of Vue element background authentication process
Vue based on Element button permission implementation solution
Vue+element+oss realizes front-end fragment upload and breakpoint resume
Solve the problem that the element DateTimePicker+vue pop-up box only displays hours
Vue imitates ElementUI's form example code
How to encapsulate the table component of Vue Element
Vue Element front-end application development conventional Element interface components

<<: How to import txt into mysql in Linux

>>: Some methods to optimize query speed when MySQL processes massive data