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


Posted in Vue.js onMarch 04, 2021

前言:      

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

官网入口:点我进入

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

遇到的问题:

我直接用cnpm  i element-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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
vue实现登录功能
Dec 31 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
VUE实现吸底按钮
Mar 04 #Vue.js
vue实现可移动的悬浮按钮
Mar 04 #Vue.js
vue中axios封装使用的完整教程
Mar 03 #Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 #Vue.js
详解vue3中组件的非兼容变更
Mar 03 #Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 #Vue.js
Vue多选列表组件深入详解
Mar 02 #Vue.js
You might like
Twig模板引擎用法入门教程
2016/01/20 PHP
php-msf源码详解
2017/12/25 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python 正则表达式(转义问题)
2014/12/15 Python
python数据结构之列表和元组的详解
2017/09/23 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Python 函数list&read&seek详解
2019/08/28 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
建筑项目策划书
2014/01/13 职场文书
座谈会主持词
2014/03/20 职场文书
工作说明书格式
2014/07/29 职场文书
小班上学期个人总结
2015/02/12 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
预备党员表决心的话
2015/09/22 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
JavaScript中reduce()的用法
2022/05/11 Javascript