支持服务器端渲染的移动端Vue组件——NutUI

2019-06-10

来源:

介绍

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

支持服务器端渲染的移动端Vue组件——NutUI


相关地址

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>

支持服务器端渲染的移动端Vue组件——NutUI


  • 对话框组件

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

支持服务器端渲染的移动端Vue组件——NutUI


  • 动作面板

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

支持服务器端渲染的移动端Vue组件——NutUI


  • 进度条

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

支持服务器端渲染的移动端Vue组件——NutUI


  • 回到顶部

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

支持服务器端渲染的移动端Vue组件——NutUI


  • 图标

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

支持服务器端渲染的移动端Vue组件——NutUI


  • 按钮

<nut-button 
 @click="clickHandler"
>
 去结算
</nut-button>
<nut-button 
 disabled
>
 去结算(disabled)
</nut-button>

支持服务器端渲染的移动端Vue组件——NutUI


  • 上传组件

<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

支持服务器端渲染的移动端Vue组件——NutUI


  • 选项卡

<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>

支持服务器端渲染的移动端Vue组件——NutUI


  • 标签栏

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

支持服务器端渲染的移动端Vue组件——NutUI


  • 日历组件

<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>

支持服务器端渲染的移动端Vue组件——NutUI


  • 日期组件

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

支持服务器端渲染的移动端Vue组件——NutUI


  • 搜索栏

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

支持服务器端渲染的移动端Vue组件——NutUI


  • 步骤条

<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>

支持服务器端渲染的移动端Vue组件——NutUI


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

支持服务器端渲染的移动端Vue组件——NutUI


主题定制

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

支持服务器端渲染的移动端Vue组件——NutUI


总结

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

北京总部
  • 北京市海淀区大钟寺华杰大厦8B2
  • 010-56181910
郑州子公司
  • 郑州市金水区紫荆山路5号2号楼1004
  • 0371-60921991
石家庄办事处
  • 石家庄市新华路294号盛安大厦5楼
  • 010-56181910
客服电话:010-82164151 | 客服邮箱:kf@jnetdata.com 版权所有 2011-2019 北京中科聚网信息技术有限公司 | Copyright 2011-2019 All Rights Reserved | 京ICP备13013562号

微信号

抖音号