前言
?聖誕節來了，先祝掘金的使用者聖誕節快樂！
我們的 iView 開源元件庫也釋出了聖誕版，快去更新日誌頁找彩蛋吧 iviewui.com。
之前在掘金髮布了多篇關於 iView 的技術文章後，在社群和 GitHub 得到了很多開發者的支援，我們也勵志要將 iView 做成精品，並且計劃在 2017 年初完成以下三項內容：
- 支援 Vue 2.0（已經快被這個問題逼瘋了）
- 支援多語言
- 增加英文文件
先說說寫本文的初衷吧，最近幾天正好在用 iView 開發一個公司的專案（其實是快速重構），3天就完成了UI和互動部分，快速的開發得力於 iView 豐富的基礎元件支援。所以藉此徵文機會，分享一些作為開發者，在使用 iView 時的經驗和技巧吧。
GitHub地址： github.com/iview/iview
一個專案能夠快速開發的基礎是什麼？
下圖是專案的區域性截圖：
可以看到有很多標準的基礎元件，比如搜尋、下拉選單、按鈕組、摺疊皮膚、Tabs、日期選擇（v0.9.11 新增）等等。這麼多元件如果需要自己開發，少說也得半個月，在使用 iView 後，僅僅用了半天時間就完成了。
所以說，如果想快速開發一個專案，最基本的要求有哪些呢？
有一套完整的 CSS 佈局基礎和Grid（Layout）系統
頁面佈局往往是開發者最頭疼的問題，如果 CSS 基礎不好的話，更是很難折騰，更不用說響應式了。而 iView 雖然是元件庫，但它也是網頁開發的一整套解決方案。
寫頁面前，大家都有 reset.css 的習慣吧，iView 則是使用normalize.css v5.0.0作為格式化基礎，所以只要匯入 iView 的樣式，就可以愉快的開始寫程式碼了。同時，iView 也幫你初始化了字型、字號、顏色等等，文件也有用色的使用建議，一般按照規範來的話，做出來的頁面都顯得很整齊漂亮。
如果用過 Bootstrap 的同學，應該很熟悉它的柵格系統，因為它是網頁佈局最常用的，尤其是很多做後端開發的，在搞不清怎麼多列布局、響應式佈局時，Grid（Layout）系統都可以解決大部分佈局問題。iView 使用的是 24柵格 系統，將一列最多分成了 24 份，可以任組合 column，只要總和不超過24就行，超過會自動折行。
柵格元件也是支援 flex 的，所以下面這些佈局都可以輕鬆實現：
使用好柵格佈局，你的專案骨架就建好了。
使用導航
大部分中後臺專案的頁面常用佈局有這麼幾種：
- 頂部 fixed 主導航 和 二級導航（如果有三級導航，可以下拉展開），如圖：
- 頂部導航 和 左側導航 配合使用，如圖：
- 使用 側邊導航 作為主導航，如圖：
iView 的導航選單元件 Menu 提供了橫縱兩種模式，以及 primary 、light、dark 三種主題，滿足你不同的佈局模式，而且使用起來很簡單，UI 也很美觀。巧用下拉選單
iView 提供了基礎的下拉選單元件，如圖：
為什麼說巧用下拉選單呢，是因為一開始開發該元件時，解決的需求就是圖片中顯示的這種普通下拉選擇，而在實際專案中，它幾乎能相容所有的下拉需求，這點是我沒有想到的，比如可以這樣用：
內部是一個 slot，理論上可以容納所以的 DOM 內容，利用好下拉元件，可以事半功倍。
表單類元件
表單元件是完成業務邏輯和互動的核心，比如 輸入框、單選、多選、級聯選擇、開關、表格、select選擇、日期選擇等等。iView 基本能滿足常用的表單類需求，有的還可以自己組合。
值得介紹的是 Table 表格元件，做後臺離不開兩種東西，Table 和 Chart。
iView 的 Table 在實現普通表格資料展示的基礎上，額外提供了很多功能，比如固定表頭、列，排序，過濾，還有市面上元件庫都不支援的功能——匯出 .csv 檔案，可以匯出原始資料、排序過濾後的資料，甚至自定義內容的資料，關鍵是支援包括IE9在內的所有瀏覽器，可以點此連結線上體驗 www.iviewui.com/components/…。
其實元件用多了，開發專案就像是在拼積木一樣。你不用去關心 UI 和功能，因為元件庫都幫你實現好了，拿來即用。
總有一個適合你的 icon
發現好多專案中，不到萬不得已，已經不想再用圖片了，iconfont 已經成為了主流，向量、方便，起到點綴頁面的功能。iView 使用了開源專案 ionicons，提供了 700+ 常用的 icon，這麼多圖示，總有一個能滿足你的需求吧。另外，在文件裡也對 Icon 元件做了特殊優化，首先這麼多圖示，總不能每次都一個一個找吧，那要找到什麼時候，所以提供了搜尋功能，而且是支援語義搜尋的，比如搜尋關鍵詞 success：
跟 success 相關的圖示都能識別出來，不侷限於檔名，同時只要點選一下圖示，就可以直接複製元件的程式碼了，是不是很方便。
結語
一個專案的進度，不是隻靠加班就能完成的，聰明的產品經理和開發者會選擇一套功能豐富的元件庫作為公司標準來開發，大幅度減少造輪子的工作。文章最後，整理了一些開發 iView 專案中發現的其它優秀元件庫，推薦給大家：
本文對你有幫助？歡迎掃碼加入前端學習小組微信群：
