介绍

NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web界面的企业级前中后台产品。支持服务器端渲染（SSR）。

相关地址

github：https://github.com/jdf2e/nutui

官网: https://nutui.jd.com/#/index

具备特性（来自官方文档）

• 跨平台，自动转微信小程序组件（稍后上线，敬请期待）
• 30+ 京东移动端项目正在使用
• 基于京东APP 7.0 视觉规范支持按需加载
• 详尽的文档和示例
• 支持定制主题
• 支持多语言（国际化）
• 支持 TypeScript
• 支持服务端渲染（Vue SSR）
• 单元测试加持
• 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程

支持的环境

• Android 4.0+
• iOS 8.0+
• 支持服务端渲染

版本选择

构建版本

• UMD版nutui.js
• UMD压缩版nutui.min.js

AMD 环境、Webpack 等构建工具环境、服务端建议使用 UMD 版，非模块化环境（如通过 <script> 标签直接引用）建议使用 UMD 压缩版。

部分组件预览

• 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>
<nut-row>
 <nut-col :span="8">
 <div class="flex-content">span:8</div>
 </nut-col>
 <nut-col :span="8">
 <div class="flex-content flex-content-light">span:8</div>
 </nut-col>
 <nut-col :span="8">
 <div class="flex-content">span:8</div>
 </nut-col>
</nut-row>
<nut-row>
 <nut-col :span="6">
 <div class="flex-content">span:6</div>
 </nut-col>
 <nut-col :span="6">
 <div class="flex-content flex-content-light">span:6</div>
 </nut-col>
 <nut-col :span="6">
 <div class="flex-content">span:6</div>
 </nut-col>
 <nut-col :span="6">
 <div class="flex-content flex-content-light">span:6</div>
 </nut-col>
</nut-row>
<nut-row>
 <nut-col :span="4">
 <div class="flex-content">span:4</div>
 </nut-col>
 <nut-col :span="4">
 <div class="flex-content flex-content-light">span:4</div>
 </nut-col>
 <nut-col :span="4">
 <div class="flex-content">span:4</div>
 </nut-col>
 <nut-col :span="4">
 <div class="flex-content flex-content-light">span:4</div>
 </nut-col>
 <nut-col :span="4">
 <div class="flex-content">span:4</div>
 </nut-col>
 <nut-col :span="4">
 <div class="flex-content flex-content-light">span:4</div>
 </nut-col>
</nut-row>

• 对话框组件

this.$dialog({
 title: "确定删除此订单？",
 content: "删除后将从你的记录里消失，无法找回"
});

• 动作面板

<nut-actionsheet :is-visible="isVisible" 
 @close="switchActionSheet('isVisible')"
 :menu-items="menuItems"
 @choose="chooseItem"
></nut-actionsheet>

• 进度条

<nut-progress 
 percentage="30"
>
</nut-progress>

• 回到顶部

<nut-backtop 
 :distance="400"
>
</nut-backtop>

• 图标

<nut-icon 
 type="top"
>
</nut-icon>

• 按钮

<nut-button 
 @click="clickHandler"
>
 去结算
</nut-button>
<nut-button 
 disabled
>
 去结算（disabled）
</nut-button>

• 上传组件

<nut-uploader
 name="uploader-demo"
 :url="url"
 :isPreview="true"
 :acceptType = "['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
 @start="onStart"
 @success="onSuccess"
 @fail="onFail"
 @progress="onProgress"
 @preview="onPreview"
 @showMsg="showMsgFn"
 typeError="对不起，不支持上传该类型文件！"
 limitError="对不起，文件大小超过限制！"
>
上传
</nut-uploader> 
javascript

• 选项卡

<nut-tab @tab-switch="tabSwitch">
 <nut-tab-panel tabTitle="页签1">页签1</nut-tab-panel>
 <nut-tab-panel tabTitle="页签2">页签2</nut-tab-panel>
 <nut-tab-panel tabTitle="页签3">页签3</nut-tab-panel>
</nut-tab>

• 标签栏

<nut-navbar 
 @on-click-back="back" 
 @on-click-title="title" 
 @on-click-more="more" 
 :leftShow="false" 
 :rightShow="false"
>title</nut-navbar>

• 日历组件

<nut-calendar 
 :is-visible="isVisible"
 :default-value="date"
 @close="switchPicker('isVisible')"
 @choose="setChooseValue"
 :start-date="`2018-10-11`"
 :end-date="`2020-11-11`"
>
</nut-calendar>

• 日期组件

<nut-datepicker 
 :is-visible="isVisible"
 type="date"
 title="请选择日期" 
 :is-show-chinese="false"
 @close="switchPicker('isVisible')"
 @choose="setChooseValue"
>
</nut-datepicker>

• 搜索栏

<nut-searchbar
 placeText="请输入自定义文案"
></nut-searchbar>

• 步骤条

<nut-steps 
 :current="current"
>
 <nut-step 
 title="已完成" 
 content="这里是该步骤的描述信息"
 >
 </nut-step>
 <nut-step 
 title="已完成" 
 content="这里是该步骤的描述信息"
 >
 </nut-step>
 <nut-step 
 title="进行中" 
 content="这里是该步骤的描述信息"
 >
 </nut-step>
 <nut-step 
 title="待进行" 
 content="这里是该步骤的描述信息"
 >
 </nut-step>
 <nut-step 
 title="待进行" 
 content="这里是该步骤的描述信息"
 >
 </nut-step>
</nut-steps>

组件比较多就不一一展示，以下是组件的分类，常用的组件都包含了

主题定制

如果你的项目不适合原有风格，还可以在一定程度上定制主题，以满足不同的业务需求

总结

NutUI是一个Vue的移动端组件库，具备京东的风格，支持服务器端渲染是比较不错的，而且在未来提供自动转微信小程序组件，非常的强大，希望对你有所帮助，有什么好的推荐或建议也欢迎到评论区留言分享！