一、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元件的認識。）