NutUI翻译站点

定位与背景

NutUI 是一套基于京东设计语言构建的移动端组件库，面向 Vue 技术栈，主要解决中后台移动端业务中的界面一致性与开发效率问题。项目由京东前端团队维护，源码托管于 GitHub，采用 MIT 协议发布，允许商业使用与二次开发。

与通用型组件库不同，NutUI 的组件设计带有明显的电商业务特征，在表单、弹层、选择器等高频交互场景上做了针对性打磨。

技术特性

多版本支持

NutUI 当前提供两条主要版本线：

两条版本线均支持按需引入与 Tree Shaking，未使用的组件不会进入最终构建产物。

组件覆盖范围

组件库涵盖以下类别：

• 基础组件：Button、Icon、Cell、Layout 等
• 表单组件：Input、Picker、DatePicker、Uploader 等
• 反馈组件：Toast、Dialog、Notify、Skeleton 等
• 导航组件：NavBar、Tabbar、Tabs、Elevator 等
• 业务组件：Address、Invoice、Sku 等电商特色模块

截至当前，NutUI 提供的组件数量超过 60 个，基本覆盖移动端业务开发的常规需求。

工程化能力

• 支持 TypeScript，类型定义随包发布
• 提供 CLI 工具用于快速初始化项目模板
• 内置主题定制机制，通过 CSS 变量即可调整品牌色与圆角等视觉参数
• 组件单元测试覆盖，保障基础质量

设计语言

NutUI 遵循京东 App 的视觉规范，核心特征包括：

• 以红色系（品牌色 #FA2C19）为默认主色
• 圆角与间距体系统一，默认采用 8px 基准栅格
• 组件状态完整，涵盖默认、禁用、加载、空数据等常见场景
• 针对移动端触控区域做了最小尺寸约束，降低误触概率

这套设计语言使得接入方无需投入额外设计资源，即可获得与京东移动端一致的交互体验。

使用方式

# 安装
npm install @nutui/nutui

# 按需引入（以 Vite 为例）
import { Button } from '@nutui/nutui'

完整引入适用于原型验证阶段，生产环境建议配合 unplugin-vue-components 实现自动按需导入，减少构建体积。

适用边界

NutUI 最适合以下场景：

1. 京东生态内的移动端 H5 或小程序项目
2. 需要快速搭建中后台移动端管理界面的团队
3. 偏好 Vue 技术栈、希望组件风格统一的业务线

如果项目基于 React 或小程序原生框架，NutUI 并非直接可用，需要评估替代方案或自行适配。