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使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
PHP第一季视频教程(李炎恢+php100 不断更新)
2011/05/29 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
nodejs读取本地中文json文件出现乱码解决方法
2018/10/10 NodeJs
详解ES6 Symbol 的用途
2018/10/14 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
Python实现队列的方法
2015/05/26 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
学校节能减排倡议书
2014/05/16 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
人事专员岗位说明书
2014/07/29 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
使用MybatisPlus打印sql语句
2022/04/22 SQL Server