項目進展快，全靠 iView 帶 | 掘金技術徵文

前言

🎅聖誕節來了，先祝掘金的用戶聖誕節快樂！
咱們的 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 項目中發現的其它優秀組件庫，推薦給你們：

• AntDesign - React
• vue-beauty
• N3
• Quasar Framework
• Element
• VUM
• Vux

---

本文對你有幫助？歡迎掃碼加入前端學習小組微信羣：