NutUI – 京东开源的轻量级移动端Vue组件库

大家好，欢迎来到IT知识分享网。

不少公司的前端部门都开源了他们的Vue组件库，京东也不例外。NutUI，这个轻量级的移动端的Vue组件库，采取了京东商城的风格，开发和服务于移动Web界面的企业级前中后台产品。

NutUI组件库

简介

NutUI，是 jdf2e 组织，也即是 京东零售用户体验设计部 – 前端开发部，在Github上开源的移动端Vue组件库，项目位于 https://github.com/jdf2e/nutui，目前版本为 v2.2.7。

NutUI包含超过50个高质量组件，目前有超过40个京东的移动端项目正在使用，设计基于京东APP 7.0视觉规范。NetUI支持按需加载，有详尽的文档和示例，支持定制主题，支持多语言国际化，支持TypeScript，支持服务端渲染（Vue SSR），有完善的单元测试，并配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程。

NutUI组件库

安装

NutUI支持的环境包括：Android 4.0+，iOS 8.0+，以及服务端渲染。官方推荐使用Gaea CLI进行快速的项目搭建。NutUI可以使用NPM安装：

npm i @nutui/nutui -S

或使用YARN安装：

yarn add @nutui/nutui

也可以使用CDN直接引入：

<!-- 生产环境版本，优化了尺寸和速度 --> <!-- 引入样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.7/dist/nutui.min.css"> <!-- 引入Vue --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <!-- 引入组件库 --> <script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.7/dist/nutui.min.js"></script>

示例

NutUI组件丰富，可以满足移动端大多数场景的需求。布局组件包括：列表项Cell，和Flex布局

Cell列表项

Cell列表项，可以组成列表，是最基本的竖向布局。组件为 nut-cell，包括标题、描述和点击事件等：

<nut-cell title="我是标题" desc="描述文字" @click-cell="clickEvnt" to="/index"> </nut-cell>

Flex布局则是基本的横向布局，划分为24份进行管理，基本用法使用row和col：

Flex布局

<nut-row> <nut-col :span="12"> <div class="flex-content">span:12</div> </nut-col> <nut-col :span="12"> <div class="flex-content flex-content-light">span:12</div> </nut-col> </nut-row>

此外，NutUI还包含有对话框Dialog，在浮层中显示，引导用户进行相关操作，支持图片对话框。

DIalog对话框

按钮同样具有很强的京东风格，包括基本的click事件等：

NutUI按钮

符合移动端风格的日期选择器DatePicker：

DatePicker日期选择

甚至还有与商城业务相关的轮盘抽奖组件luckdraw，可以设置奖品列表、转动次数、奖品样式等，十分方便：

LuckDraw转盘抽奖

总结

NutUI作为一个移动端的Vue组件库，特性丰富，组件质量高，轻量且支持按需引用，无论是产品前台，还是中后台的界面，均可以使用NutUI进行高效快速的开发。

NutUI由京东开源，目前来看，项目十分活跃，还开发了包括Gaea CLI等的生态工具，有兴趣的开发者可以关注跟进。