NutUI

京东风格的轻量级移动端 Vue 组件库，支持多端小程序，源自京东零售技术积累

基本信息

核心特性

🛒 京东电商基因

NutUI 直接源自京东 APP 10.0 的视觉规范和交互设计，是国内少有的电商场景原生优化的组件库：

• 京东 APP 设计规范：遵循京东官方视觉标准，电商风格开箱即用
• 电商业务组件：提供 Price（价格）、GoodsCard（商品卡片）、Address（地址选择）、Coupon（优惠券）、GoodsAction（商品导航）、SubmitBar（提交订单栏）等电商专属组件
• 营销场景支持：配套 NutUI-Bingo 抽奖组件库，覆盖转盘抽奖、刮刮卡、砸金蛋等营销互动场景
• 京东物流组件：NutUI-JDL 物流版本，支持配送时间选择（TabSelect）等物流场景

📱 一套代码，多端运行

NutUI 与 Taro 深度整合，真正实现跨端开发：

• H5：移动端网页应用
• 微信小程序：通过 Taro 编译到微信小程序
• 京东小程序：原生支持京东小程序平台
• 支付宝小程序：Taro 支持的其他小程序平台
• React Native：独立的 nutui-react-native 包

🎨 灵活的主题定制

NutUI 4.0+ 提供双模式主题定制方案：

• CSS Variables 动态主题：运行时通过 CSS 变量覆盖默认样式，支持动态切换主题、暗黑模式
• SCSS 变量预编译：通过自定义 SCSS 变量文件，编译时定制品牌风格
• 组件级定制：每个组件都有独立的主题变量，可精细控制样式
• 在线主题配置：官方提供主题配置工具，可视化调整并导出主题

⚡ TypeScript 全面支持

• 所有组件均提供完整的 TypeScript 类型定义
• 支持 IDE 智能提示和类型检查
• 基于 Vue 3 Composition API 构建

📦 按需引入

• 支持 unplugin-vue-components + @nutui/auto-import-resolver 自动按需引入
• 自动 Tree Shaking，只打包使用到的组件
• 组件和样式同步按需加载

🧩 丰富的组件矩阵

80+ 高质量组件覆盖移动端主流场景：

适用场景

✅ 推荐使用场景

1. 电商移动应用

   • 京东风格视觉设计开箱即用
   • 内置商品卡片、价格展示、地址选择等电商组件
   • 京东 APP 同款交互体验，用户认知成本低

2. 移动端 H5 页面

   • 针对移动端浏览器优化
   • 触摸交互、手势支持
   • 轻量级打包体积，首屏加载快

3. 跨端小程序开发

   • 配合 Taro 实现 H5 + 多端小程序一套代码
   • 微信、京东、支付宝小程序统一开发
   • 减少多端维护成本

4. 营销活动页面

   • NutUI-Bingo 提供抽奖、互动游戏组件
   • 适合大促、节日营销等场景
   • 快速搭建活动落地页

5. UniApp 多端项目

   • 通过 nutui-uniapp 在 UniApp 中使用 NutUI 组件
   • 支持 H5、微信/支付宝小程序、App 多端
   • DCloud 插件市场一键安装

⚠️ 不推荐场景

1. PC 端后台管理系统：NutUI 专注移动端，PC 场景请使用 Element Plus、Ant Design Vue 等
2. 非电商类大型应用：组件库偏电商风格，通用业务组件不如综合性组件库丰富
3. 国际化项目：NutUI 主要面向国内市场，国际化文档和社区资源相对有限
4. 需要 React Native 深度定制：React Native 版本相对较新，生态不如 Vue 版成熟

技术亮点

1. 京东零售技术积累沉淀

NutUI 是京东零售前端团队多年技术积累的产物：

• 源自京东 APP：组件设计直接服务于京东亿级用户的移动端产品
• 实战验证：经过京东 618、双 11 等大促场景的反复打磨和优化
• 电商交互范式：地址选择、商品展示、优惠券、订单结算等组件经过海量用户验证
• 持续迭代：自 2019 年开源以来，持续将京东内部最佳实践开放给社区

2. Taro 深度整合

# 安装 Taro + NutUI
npm install @tarojs/taro @nutui/nutui
 
# NutUI 作为 Taro 官方推荐 Vue 组件库
# 在 Taro 项目中直接使用 NutUI 组件
import { Button, Cell, Price } from '@nutui/nutui-taro'

• Taro 官方文档将 NutUI 列为 Vue 技术栈推荐组件库
• 组件自动适配小程序平台差异
• 样式自动编译为各平台支持的 CSS 方案

3. CSS Variables 动态主题

// 方式一：CSS 变量动态主题（运行时）
// 覆盖 NutUI CSS 变量实现主题定制
:root {
  --nut-primary-color: #e1251b;  // 京东红
  --nut-button-primary-background-color: #e1251b;
  --nut-cell-color: #333333;
}
 
// 方式二：SCSS 变量预编译（编译时）
// 创建 custom-variables.scss
$nut-primary-color: #e1251b !default;
$nut-button-primary-background-color: $nut-primary-color !default;

// Vite 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/styles/custom-variables.scss";'
      }
    }
  }
})

4. 按需引入配置

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { NutUIResolver } from '@nutui/auto-import-resolver'
 
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [NutUIResolver()]
    })
  ]
})

配置完成后，模板中直接使用组件，无需手动 import：

<template>
  <nut-button type="primary">京东红按钮</nut-button>
  <nut-price :price="99.90" :need-symbol="true" />
</template>

5. 电商特色组件示例

<template>
  <!-- 价格展示：整数和小数部分不同样式 -->
  <nut-price :price="1234.56" :need-symbol="true" :thousands="true" />
 
  <!-- 商品卡片 -->
  <nut-goods-card
    :img="goodsImg"
    :title="goodsTitle"
    :price="price"
    :shop-name="shopName"
  />
 
  <!-- 四级地址选择 -->
  <nut-address
    v-model:visible="showAddress"
    :exist-address="existAddress"
    @selected="onAddressSelected"
  />
 
  <!-- 提交订单栏 -->
  <nut-submit-bar :price="totalPrice" :button-text="提交订单" />
</template>

生态集成

Taro 框架（推荐）

NutUI 与 Taro 的配合是官方推荐的最佳实践：

# 创建 Taro 项目
npx @tarojs/cli init my-app
 
# 安装 NutUI
npm install @nutui/nutui

• 官方推荐：Taro 文档站将 NutUI 列为 Vue 技术栈首选组件库
• 零配置适配：组件样式自动编译为各小程序平台兼容格式
• 开发文档：docs.taro.zone/docs/nutui

nutui-uniapp（UniApp 适配）

社区维护的 UniApp 版本，基于 NutUI 4.x 改造：

# 方式一：npm 安装
npm install nutui-uniapp
 
# 方式二：DCloud 插件市场导入
# 插件 ID: 13491

• DCloud 插件市场：ext.dcloud.net.cn/plugin?id=13491
• 独立文档站：nutui-uniapp.pages.dev
• GitHub 仓库：nutui-uniapp/nutui-uniapp
• 支持特性：Vue 3、暗黑模式、按需引入、uni_modules 方式接入

NutUI-Bingo（营销组件库）

京东开源的营销互动组件库，覆盖抽奖和促销场景：

• 转盘抽奖：经典大转盘抽奖交互
• 刮刮卡：模拟刮刮乐效果
• 砸金蛋：趣味互动营销
• 摇一摇：手机摇动互动
• 红包雨：大促场景特效
• GitHub 仓库：jd-opensource/nutui-bingo

NutUI-React（React 版本）

京东同时维护 React 技术栈版本：

• GitHub 仓库：jdf2e/nutui-react
• 最新版本：4.0.0-beta.4（2026 年 6 月）
• 组件同步：与 Vue 版本保持功能对等
• React Native：jdf2e/nutui-react-native

与其他移动端组件库对比

选择建议：

• 电商/零售应用 → NutUI（京东风格、电商组件丰富）
• 通用移动端项目 → Vant（社区最大、文档最全）
• 腾讯生态项目 → TDesign Mobile（与微信小程序设计一致）

学习资源

官方资源

• NutUI 官网（H5 Vue 4.x）：nutui.jd.com/h5/vue/4x
  • 全部组件文档与在线示例
  • 主题定制指南
  • 设计令牌（Design Tokens）说明
• NutUI 官网（Taro Vue 4.x）：nutui.jd.com/taro/vue/4x
  • 小程序版本文档
  • Taro 集成指南
• Taro + NutUI 文档：docs.taro.zone/docs/nutui
  • Taro 官方集成教程
• GitHub 仓库：jd-opensource/nutui
  • 源码示例、Issue 讨论、更新日志

技术文章

1. 掘金社区

   • NutUI 4.0 正式发布！ — 在线主题定制功能探索
   • NutUI 3 多端开发实践 — 小程序适配实战
   • NutUI 落地实践 — 让组件库服务慧采协同采购业务

2. 知乎专栏

   • 使用 NutUI 搭建「自定义业务风格」的组件库
   • 主流移动端组件库的对比和分析 — NutUI 与 Vant 等库横向对比

3. 博客园

   • NutUI 4.0 正式发布！ — 官方发布文章

4. 京东云开发者社区

   • 京东移动端组件库 React 版如约而来
   • 京东风格的移动端 Vue 组件库 NutUI 2.0

社区资源

• nutui-uniapp 文档：nutui-uniapp.pages.dev — UniApp 适配独立文档
• DCloud 插件市场：ext.dcloud.net.cn/plugin?id=13491 — 下载量 8,500+
• GitHub Discussions：jd-opensource/nutui/discussions — 社区讨论与 RFC
• Pixso 设计实践：10 分钟搭建购物小程序界面 — 设计 + 开发协作案例

中文资源推荐

1. 官方中文文档：所有文档均为中文，对国内开发者友好
2. 掘金社区：大量 NutUI 实战文章和经验分享
3. CSDN：集成教程和 UniApp 使用指南
4. 知乎：组件库对比分析和业务实践分享

2026 年现状

最新版本

• 当前稳定版：v4.3.15（2026 年 3 月发布）
• Beta 版本：v4.3.15-beta.3（2026 年 4 月）
• 累计版本：249+ 个发布版本
• 累计提交：10,490+ 条 commits

社区数据

维护状态

NutUI 自 2019 年由京东零售前端团队开源，至今已经历 7 年的发展。2026 年 3 月发布了 v4.3.15 稳定版。社区有开发者在 GitHub Issue #3328 中关注项目维护活跃度。作为京东技术生态的一部分，NutUI 持续服务于京东内部业务并同步开源更新。

发展趋势

1. 多端能力深化：

   • 与 Taro 生态持续深度绑定
   • nutui-uniapp 社区适配持续完善
   • 小程序市场份额增长带来天然需求

2. 电商场景优势：

   • 京东电商基因持续强化，在零售、电商赛道保持差异化竞争力
   • NutUI-Bingo 营销组件库持续补充互动场景

3. 技术架构演进：

   • Vue 3 + TypeScript + Vite 现代技术栈
   • CSS Variables 动态主题能力持续增强
   • 按需引入工具链完善

4. 生态扩展：

   • React 版本持续维护
   • React Native 版本拓展原生移动端
   • 京东物流版本（NutUI-JDL）拓展垂直场景

2026 年推荐度

总结

NutUI 是 2026 年电商/零售类移动端 Vue 项目的首选组件库之一：

✅ 优势：

• 京东 APP 设计规范，电商风格开箱即用
• 丰富的电商业务组件（价格、商品卡片、地址选择、优惠券等）
• 一套代码多端运行（H5 + 微信/京东/支付宝小程序）
• Taro 官方推荐 Vue 组件库，深度整合
• CSS Variables 动态主题 + SCSS 预编译双模式
• NutUI-Bingo 营销互动组件库
• 京东亿级用户场景实战验证
• 完整的 TypeScript 支持

⚠️ 注意：

• 专注移动端，不适用于 PC 端项目
• 电商风格明显，非电商项目可能需要较多主题定制
• npm 下载量相比 Vant 等头部库仍有差距
• 社区规模相对较小，遇到问题可能依赖 Issue 反馈

适合团队：

• 电商/零售类移动端应用开发团队
• 使用 Taro 进行跨端小程序开发的项目
• 需要快速搭建营销活动页面的团队
• 追求京东风格交互体验的产品

参考链接

• NutUI 官方网站
• GitHub 仓库（Vue 版）
• GitHub 仓库（React 版）
• npm 包 @nutui/nutui
• Taro + NutUI 集成文档
• nutui-uniapp 文档
• DCloud 插件市场
• NutUI-Bingo 营销组件库
• NutUI 4.0 正式发布文章
• 移动端组件库对比分析（知乎）
• NutUI 在线主题定制探索（掘金）