大佬教程收集整理的这篇文章主要介绍了前端ui组件——element-ui和ant design vue，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
一、Element-UI 1、介绍Element-Ul是饿了么前端团队推出的一款基于Vue.js2.0 的桌面端UI框架。 2、安装成功安装项目模板后，我们需要安装element-ui到项目下npm install element-uinpm install element-plus --save //能更好地和 webpack 打包工具配合使用接下来即可参照Element-ui的官方文档开发，地址：https://element-plus.org/通过unpkg.com/element-plus获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。引入样式 link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">引入组件库 script src="https://unpkg.com/element-plus/lib/index.full.js"></script> 3、Element-UI给我们提供的组件1.basic：Layout布局、Container布局容器、Color色彩、Typography字体、Border边框、lcon图标、Button按钮、Link文字链接、Space间距2.Form：Radio.单选框、checkbox多选框、Input输入框、Inputnumber计数器、SELEct.选择器、Cascader级联选择器、Switch开关、Slider滑块、TmePlcker时间选择器、TImeSELEt时间选择器、DatePicker 日期选择器、Date TePlcker日期时间选择器、Upload上传、Rate评分、ColorPicker颜色选择器、Transfer穿梭框、Form表单3.Data：Table表格、Tag标签、Progress进度条、Tree树形控件、Pagination分页、Badge标记、Avatar头像、Skeleton骨架屏、Empty空状态4.Notice：Alert警告、Loading加载、message消息提示、messageBox弹框、Notification通知5.Navigation：Affixi 固钉、NavMenu导航菜单、Tabs标签页、Breadcrumb面包屑、PageHeader页头、Dropdown下拉菜单、Steps步骤条6.others：Dialog对话框、Tooltip文字提示、Popover弹出框、Popconfirm气泡确认框、Card卡片、Carousel走马灯、Collapse折叠面板、Timeline时间线、Divider分割线、Calendar日历、Image图片、BACktop回到顶部、InfiniteScroll无限滚动、Drawer抽屉 4、使用过程中可能会碰到的问题1.打开页面乱码通过Element-UI官方提供的模板开发，会发现在浏览器打开页面的时候中文是乱码，且已在html页面中设置了<meta chartest='utf-8'>。这时应仔细查看该页面所涉及的文件的编码格式，可能引用的某个文件的编码格式是GBK，统一设置为UTF-8即可。2. 表格中 用v-if 切换不同表字段时 表头字段顺序经常互换 解决方法：在table-column中加入:key=“Math.random()”3. v-if控制的el-tooltip，可能切换时会发生不提示文字烦人问题 解决方法：改成v-show 二、Ant Design Vue 1、介绍Ant Design Vue是 Ant Design 3.X 的 Vue 实现，开发和服务于企业级后台产品。ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目。支持现代浏览器和 IE9 及以上（需要 polyfills）。Ant Design Vue官网：https://www.antdv.com/docs/vue/introduce-cn/ 2、安装使用Npm安装npm install ant-design-vue --save在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。在 npm 发布包内的 ant-design-vue/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。也可以通过jsDelivr 8M hits:/ month或 UNPKG 进行下载。还可以按需增加 3、提供的组件1.General:Button按钮、lcon图标2.Layout：Grid栅格、Layout布局、Space间距、Navigation、Affx固钉、Breadcrumb面包屑、Dropdown下拉菜单、Menu导航菜单、PageHeader头、Pagination分颁、Steps步骤条3.Data Entry：AutoComplete自动完成、Cascader级联选择、checkbox多选框、DatePicker日期选择框、Form表弹、FormModel弹、Input输入框、Inputnumber数字输入框、Mentions提及、Radio单选框、Rate评分、SELEct选择器、Slider滑动输入条、Switch关、TimePicker时间选择框、Transfer穿梭框、TreeSELEct树选择、Upload上传4.Data Display：Avatar头像、Badge徽标数、Calendar日历.、Card卡片、Carousel超灯、Collapse折叠面板、Comment评论、Descriptions描述列表、Empty空状态、List列表、Popover气泡卡片、Statistic统计数值、Table表格、Tabs标签页、Tag标签、Timeline时间轴、Tooltip文字提示、Tree树形控件5.FeedBACk：Alert警告提示、Drawer抽屉、message全局提示、Modal对话框、Notification通知提醒框、Popconfrm气泡确认框、Progress进度条、Result结果、Skeleton骨架屏、Spin加载中6.other：Anchor锚点、BACkTop回到顶部、ConfigProvider全局化配置、Divider分割线、LocaleProvider国际化（概述仅为最基础前端UI组件的认识。）
以上是大佬教程为你收集整理的前端ui组件——element-ui和ant design vue全部内容，希望文章能够帮你解决前端ui组件——element-ui和ant design vue所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。