前端ui组件——element-ui和ant design vue
一、Element-UI
1、介绍
Element-Ul是饿了么前端团队推出的一款基于Vue.js2.0 的桌面端UI框架。
2、安装
成功安装项目模板后，我们需要安装element-ui到项目下
npm install element-ui
npm 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组件的认识。）