vue3.0中使用element的完整步骤

前言：      

在vue3.0中使用element框架，因为element是支持vue2.0的，他推出的支持vue3.0的版本叫 element-plus

官网入口：点我进入

一、个人遇到的问题与解决办法：

遇到的问题：

我直接用cnpm  i element-plus -s 装的版本，不知道为啥，一直报错 图1，版本型号 图2 ，我的代码中使用图3

解决办法：

我把package.json中的element-plus的版本更换成    下面这句话，解决了问题（是否为最新版本问题，还在求证中）

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

二、具体使用

1、全局引入：

安装 cnpm i  element-plus -S

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

页面上正常使用

2、按需引入：

（1）安装 cnpm i  element-plus -S

（2）新加文件夹 plugins ,新建配置文件 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）main.js中配置

（4）跟element一样正常使用就可以了

总结

到此这篇关于vue3.0中使用element的文章就介绍到这了,更多相关vue3.0使用element内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 使用vue-element-admin框架从后端动态获取菜单功能的实现
• vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
• vue + element ui实现播放器功能的实例代码
• vue element后台鉴权流程分析
• vue基于Element按钮权限实现方案
• vue+element+oss实现前端分片上传和断点续传
• 解决element DateTimePicker+vue弹出框只显示小时
• Vue模仿ElementUI的form表单实例代码
• 如何封装Vue Element的table表格组件
• Vue Element前端应用开发之常规Element界面组件

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！