项目进展快，全靠 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

---

本文对你有帮助？欢迎扫码加入前端学习小组微信群：