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

Summary of Seven Basic XHTML Coding Rules

1. All tags must have a corresponding end tag Prev...

Methods and steps for Etcd distributed deployment based on Docker

1. Environmental Preparation 1.1 Basic Environmen...

How to prevent website content from being included in search engines

Usually the goal of building a website is to have...

A brief discussion on the use of Web Storage API

Table of contents 1. Browser local storage techno...

XHTML Tutorial: XHTML Basics for Beginners

<br />This site’s original content, please i...

Vue component encapsulates sample code for uploading pictures and videos

First download the dependencies: cnpm i -S vue-uu...

Solution to the problem of slow docker pull image speed

Currently, Docker has an official mirror for Chin...

Example of how to set up a third-level domain name in nginx

Problem Description By configuring nginx, you can...

A brief discussion on the optimization of MySQL paging for billions of data

Table of contents background analyze Data simulat...

MySQL horizontal and vertical table conversion operation implementation method

This article uses examples to illustrate how to i...

How to use a game controller in CocosCreator

Table of contents 1. Scene layout 2. Add a handle...

Summary of the differences between MySQL storage engines MyISAM and InnoDB

1. Changes in MySQL's default storage engine ...