# 设计资源

> 这里提供了 NutUI-JDL 现有的组件 [设计资源](https://storage.jd.com/nutui-static/NutUI-JDL.sketch) 包含 Sketch 格式的组件设计规范、色彩规范。


<img style="margin-top:20px;" width="100%" src="https://img14.360buyimg.com/imagetools/jfs/t1/129208/38/8024/642721/5f1e75adE36ecf254/a553079f19a6e692.png" />

# 文章资源
<ul class="article">
<li>

#### [NutUI 落地实践-让组件库服务慧采协同采购业务](https://jelly.jd.com/article/5f30a8ca645f82014b842b81)  
<img width="300" src="https://img13.360buyimg.com/ling/jfs/t1/119128/31/14648/534724/5f30b5c3E97731164/b21b7e1e705dd451.png" />
</li>
<li>

#### [NutUI 实战--持续升级企业业务之福礼](https://jelly.jd.com/article/5f10308affb8ec014f4f326a)  
<img width="300" src="https://img30.360buyimg.com/ling/jfs/t1/112680/27/12443/129918/5f10250aEe0c7f88c/8a1c85b3868cf4be.jpg" />
</li>
<li>

#### [Picker 组件的设计与实现](https://jelly.jd.com/article/5f03d9b448672e01541ec47d)  
<img width="300" src="https://img12.360buyimg.com/ling/jfs/t1/147336/18/2251/94226/5f03d92aE06d4eca7/f1254985cde03185.jpg" />
</li>
<li>

#### [为京东PLUS会员保驾护航的日子](https://jelly.jd.com/article/5ef99cb17c53070156dd5a6e)  
<img width="300" src="https://img20.360buyimg.com/ling/jfs/t1/126605/40/5966/64049/5ef99c95E50ef75b7/ac2f47fb935ec7c2.jpg" />
</li>
<li>

#### [组件popup的设计和源码剖析](https://jelly.jd.com/article/5ef007644b54be014cf4ca59)  
<img width="300" src="https://img13.360buyimg.com/ling/jfs/t1/135984/5/2728/53591/5ef0074aE8feda054/b5b2dbdbd0dc1e1c.jpg" />
</li>
<li>

#### [NutUI 视频组件开发心得](https://jelly.jd.com/article/5ed9ac37c27b86015c501423)  
<img width="300" src="https://img12.360buyimg.com/ling/jfs/t1/108038/33/20231/567824/5ed9ae82E8f7e0742/e0c3f4135afb19d6.png" />
</li>
<li>

#### [如何用 Canvas 拍出 JDer's 工作照](https://jelly.jd.com/article/5ecf17905ea1c6015178a7c5)  
<img width="300" src="https://img20.360buyimg.com/ling/jfs/t1/131387/28/569/134506/5ecf205cEf2e7b73d/ae808a5e5e2e9552.jpg" />
</li>
<li>

#### [十分钟快速上手 NutUI](https://jelly.jd.com/article/5ec4ca4428979a015430ee75)  
<img width="300" src="https://img11.360buyimg.com/ling/jfs/t1/121284/28/2320/129960/5ec4cf2fEa29c6e5c/aa75321ed348670a.jpg" />
</li>
<li>

#### [NutUI官网关键技术揭秘](https://jelly.jd.com/article/5eba69103878200153621a62)  
<img width="300" src="https://img10.360buyimg.com/ling/jfs/t1/126986/22/1192/96973/5eba68efEff6989ef/15388ba13db28892.png" />
</li>

<li>

#### [NutUI CLI 源码解析](https://jelly.jd.com/article/5e842c8510f7500156d470b0)  
<img width="300" src="https://img12.360buyimg.com/ling/jfs/t1/95352/19/17215/579428/5e842c7aEde2624b2/c6da749c891a8cac.png" />
</li>
<li>

#### [Webpack那些你不知道的事](https://jelly.jd.com/article/5e4c9c1c01a3a70183dfab76)  
<img width="300" src="https://img30.360buyimg.com/ling/jfs/t1/98660/30/12530/412518/5e4c9ca5E9977c173/1334c83826a721ce.jpg" />
</li>
<li>

#### [倒带，回看我们「动」起来的2019](https://jelly.jd.com/article/5e202f35fc9e0d0152c1d534)  
<img width="300" src="https://img10.360buyimg.com/ling/jfs/t1/88195/13/11879/259657/5e3cd9f8E6102c003/dcdf5a4cb8703844.png" />
</li>
<li>

#### [京东PLUS会员项目前端性能优化实践](https://jelly.jd.com/article/5c66173eef943d0054d09b3f)  
<img width="300" src="https://img20.360buyimg.com/ling/jfs/t1/19888/36/7120/143703/5c662dcaE11bb07d2/d0f2315dd7228b08.jpg" />
</li>
</ul>

# 社区文章

#### [NutUI - 由京东出品，适合快速开发商城类h5、小程序的移动端 UI 组件库](https://zhuanlan.zhihu.com/p/161724686)  

#### [Vue 组件库工程探索与实践——按需加载篇](https://www.jianshu.com/p/a07b1f699c0e)  

#### [读京东 NutUI 框架总结（1）](https://www.jianshu.com/p/a07b1f699c0e)  

#### [Vue 使用 Vant 实现 Tab 切换，使用 NutUI 实现上拉加载下拉刷新](https://baijiahao.baidu.com/s?id=1666288392408654024&wfr=spider&for=pc)  

#### [Vue 引入 NutUI](https://www.cnblogs.com/fqh123/p/12066828.html)

#### [NutUI 上拉刷新下拉加载的使用](https://www.cnblogs.com/fqh123/p/12152981.html)