Complete steps to use element in vue3.0

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

Recommend

MySQL DML language operation example

Additional explanation, foreign keys: Do not use ...

Mysql delete data and data table method example

It is very easy to delete data and tables in MySQ...

WeChat applet scroll-view realizes left and right linkage

This article shares the specific code for WeChat ...

MySQL merges multiple rows of data based on the group_concat() function

A very useful function group_concat(), the manual...

Vue+SSM realizes the preview effect of picture upload

The current requirement is: there is a file uploa...

Vue uses el-table to dynamically merge columns and rows

This article example shares the specific code of ...

How to show or hide common icons on the desktop in Windows Server 2012

Windows Server 2012 and Windows Server 2008 diffe...

Implementation of tomcat image created with dockerfile based on alpine

1. Download the alpine image [root@docker43 ~]# d...

How to reset the initial value of the auto-increment column in the MySQL table

How to reset the initial value of the auto-increm...

How to get form data in Vue

Table of contents need Get data and submit Templa...

Vue project implements file download progress bar function

There are two common ways to download files in da...