目　　錄
第1章　開發(fā)環(huán)境的配置 （1）
1.1　使用npm配置開發(fā)環(huán)境 （1）
1.1.1　Vue的安裝 （1）
1.1.2　Element的安裝 （6）
1.1.3　OpenLayers的安裝 （6）
1.2　采用直接引用的方式配置開發(fā)環(huán)境 （7）
1.2.1　下載Vue文件 （7）
1.2.2　下載Element文件 （8）
1.2.3　下載OpenLayers文件 （10）
1.3　第一個(gè)Element+Vue+OpenLayers示例 （11）
1.4　多語(yǔ)言切換 （12）
1.5　自定義主題樣式切換 （14）
1.6　組件過(guò)渡動(dòng)畫 （15）
第2章　基本組件 （19）
2.1　Element的布局 （19）
2.1.1　基礎(chǔ)布局 （19）
2.1.2　分欄間隔 （20）
2.1.3　混合布局 （21）
2.1.4　分欄偏移 （23）
2.1.5　對(duì)齊方式 （24）
2.2　Element的布局容器 （26）
2.3　Element的色彩 （29）
2.4　Element的字體 （32）
2.5　Element的邊框 （35）
2.6　Element的圖標(biāo) （38）
2.7　Element的按鈕 （40）
2.7.1　按鈕的樣式定義 （40）
2.7.2　按鈕的事件綁定 （42）
2.8　Element的文字鏈接 （44）
2.9　思考與練習(xí)題 （46）

第3章　表單組件 （47）
3.1　單選框（Radio） （47）
3.2　多選框（Checkbox） （49）
3.3　輸入框（Input） （52）
3.4　計(jì)數(shù)器（InputNumber） （56）
3.5　選擇器（Select） （57）
3.6　級(jí)聯(lián)選擇器（Cascader） （61）
3.7　開關(guān)（Switch） （64）
3.8　滑塊（Slider） （66）
3.9　時(shí)間選擇器（TimePicker） （69）
3.10　日期選擇器（DatePic） （73）
3.11　日期時(shí)間選擇器（DateTimePicker） （76）
3.12　上傳（Upload） （78）
3.13　評(píng)分（Rate） （86）
3.14　顏色選擇器（ColorPicker） （88）
3.15　穿梭框（Transfer） （89）
3.16　表單（Form） （95）
3.17　思考與練習(xí)題 （110）
第4章　數(shù)據(jù)組件 （111）
4.1　表格（Table） （111）
4.2　標(biāo)簽（Tag） （143）
4.3　進(jìn)度條（Progress） （146）
4.4　樹形（Tree）組件 （148）
4.5　分頁(yè)（Pagination） （158）
4.6　標(biāo)注（Badge） （159）
4.7　頭像（Avatar） （162）
4.8　思考與練習(xí)題 （164）
第5章　通知組件 （165）
5.1　警告（Alert） （165）
5.2　加載（Loading） （167）
5.3　消息提示（Message） （172）
5.4　彈框（MessageBox） （175）
5.5　通知（Notification） （185）
5.6　思考與練習(xí)題 （191）
第6章　導(dǎo)航組件 （193）
6.1　導(dǎo)航菜單（NavMenu） （193）
6.2　標(biāo)簽頁(yè)（Tabs） （198）
6.3　面包屑（Breadcrumb） （202）
6.4　頁(yè)頭（PageHeader） （204）
6.5　下拉菜單（Dropdown） （205）
6.6　步驟條（Steps） （208）
6.7　思考與練習(xí)題 （211）
第7章　其他組件 （213）
7.1　對(duì)話框（Dialog） （213）
7.2　文字提示（Tooltip） （217）
7.3　彈出框（Popover） （219）
7.4　卡片（Card） （221）
7.5　走馬燈（Carousel） （223）
7.6　折疊面板（Collapse） （225）
7.7　時(shí)間線（Timeline） （228）
7.8　分割線（Divider） （230）
7.9　日歷（Calendar） （231）
7.10　圖片（Image） （233）
7.11　無(wú)限滾動(dòng)（InfiniteScroll） （235）
7.12　抽屜（Drawer） （236）
7.13　思考與練習(xí)題 （240）
第8章　Element+Vue+OpenLayers項(xiàng)目實(shí)戰(zhàn) （241）
8.1　智慧校園系統(tǒng)的需求分析 （241）
8.2　智慧校園系統(tǒng)的設(shè)計(jì) （241）
8.2.1　開發(fā)環(huán)境 （241）
8.2.2　數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì) （241）
8.2.3　系統(tǒng)功能設(shè)計(jì) （247）
8.3　智慧校園系統(tǒng)的功能實(shí)現(xiàn) （247）
8.3.1　地圖基本功能 （248）
8.3.2　道路設(shè)施查詢 （249）
8.3.3　運(yùn)動(dòng)休閑查詢 （250）
8.3.4　教學(xué)設(shè)施查詢 （251）
8.3.5　餐飲服務(wù)查詢 （252）
8.3.6　辦公樓查詢 （252）
8.3.7　學(xué)生宿舍查詢 （253）