Foreword:
Use the element framework in vue3.0 , because element supports vue2.0 , the version he launched that supports vue3.0 is called element-plus
table of Contents:
Official website entrance: click me to enter
1. Problems encountered by individuals and solutions:
"element-plus": "^1.0.1-alpha.19",
Install cnpm i element-plus -S
(1) Install cnpm i element-plus -S
(2) Add a new folder plugins and create a new configuration file element.js
(4) Just use it as normal as element
Official website entrance: click me to enter
1. Problems encountered by individuals and solutions:
Problems encountered:
I directly use the version installed by cnpm i element-plus -S. I don’t know why, but I keep reporting errors as shown in Figure 1, Version and Model Figure 2, and I use Figure 3 in my code.
figure 1
figure 2
image 3
Solution:
I changed the version of element-plus in package.json to the following sentence, which solved the problem (it may be because my project was upgraded from 2.0 to 3.0 at the earliest, instead of the latest direct installation of 3.0)
"element-plus": "^1.0.1-alpha.19",
2. Specific use
1. Global introduction:
-
Install cnpm i element-plus -S
-
Add in 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. Introduce on demand:
(1) Install cnpm i element-plus -S
(2) Add a new folder plugins and create a new configuration file element.js
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
import installElementPlus from './plugins/element.js'
import 'element-plus/lib/theme-chalk/index.css'
const app = createApp(App)
installElementPlus(app)
app.use(store).use(router).mount('#app')(4) Just use it as normal as element
It ends here