金先生的 NutUI3 初体验

冬日清晨，客服小王第一个来到了公司，还没顾得上脱下厚厚的羽绒服，桌上的电话就响了起来。“您好，这里是京东客服，请问有什么可以帮到您的么？”电话那头很嘈杂，呼啸的北风让来电人的声音很难被听清，而唯一可以被弄懂的就是对方一直在声嘶力竭反复强调的“…开票！…我要开票！…”

金先生的诉求

业务娴熟的小王并没有慌乱，在办公桌前静候了几分钟后，电话铃声果然再次响起。

Invoicing wanted

业务娴熟的小王并没有慌乱，在办公桌前静候了几分钟后，电话铃声果然再次响起。

经过短暂几分钟的交谈，小王明白了来电人金先生的意图，在使用京东慧采 APP 购买到满意的商品后，开票环节的体验却比较差，每次都要找人帮忙处理，感觉很麻烦，希望能有一个自助开票的功能上线。

小王耐心地听金先生讲完后，便立刻展开了调查，原来京东慧采 APP 是一款专门面向大客户的购物平台，线上运行时间久，口碑也不错，小王稍作打听就顺利找到了慧采 APP 的研发人员。

在研发小哥哥那里，小王了解到：业务侧之前也做过调研，目前慧采 APP 的客户在使用开票功能的时候的确体验不佳，我们的商务及运营端对于发票处理的工作量也较大，开票时效无法提升，人力成本也很高。快速开发一个自助开票系统是很有必要的。

小王：“研发小哥哥，客户那边催的紧，咱们啥时候可以开发完这个功能呀？”

小王：“小哥哥，小哥哥，多久可以做好呀？”

小哥哥：“很快。”

小王：“…”

项目开发

develop with NutUI3

NutUI 是一套京东风格的移动端组件库，支持使用 Vue 在 H5和小程序端进行开发。小哥哥打开了 NutUI 官网 ，发现每半个月就会有一次大版本更新，并且最近几个版本又新增了好多组件：指示器组件、表格组件、骨架屏组件、级联选择器组件…不仅如此，组件库的设计风格也紧跟趋势，已然符合最新的京东 10.0 设计规范。


小哥哥打开了视觉稿，看到了铺满屏幕的几十张设计图，心中有些后悔和客服小王说了“很快”那两个字。但是看到入口页面后，他的眼中闪过一道光。

入口文件的这种设计，虽然看起来简单，但是也要考虑圆角、边界、间距、字体、右侧箭头等内容的开发与调整，而 NutUI 的单元格（Cell）组件却可以让整个开发时间缩减到极致。小哥哥思考着，敲下了几行代码：

<nut-cell-group>
     <nut-cell title="申请开票" is-link></nut-cell>
     <nut-cell title="开票提报申请单查询" is-link></nut-cell>
     <nut-cell title="发票换开查询" is-link