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


前言:

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

官网入口:点我进入

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

遇到的问题:

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

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

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

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

解决办法:

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

“element-plus”: “^1.0.1-alpha.19”,

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

二、具体使用

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内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

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

郑重声明:本网站发布的内容(图片、视频和文字)以及用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服

发表评论

登录后才能评论