NutUI UniApp

NutUI UniApp#

资源概述#

NutUI UniApp 是一个基于京东 NutUI 4.x 版本改造的 uni-app 组件库，由社区开发者 Yang1206 发起并维护。项目将京东 NutUI（Taro 版）适配到 uni-app 平台，使用 Vue 3 技术栈开发，提供 80+ 高质量组件，覆盖移动端主流场景。

组件库基于京东 APP 10.0 视觉规范设计，支持 TypeScript、暗黑模式、国际化（多语言）、动态定制主题等特性。一套代码同时编译到微信/支付宝/抖音/百度小程序及 H5，开箱即用。

自 2023 年 6 月开源以来持续高频迭代，npm 包 nutui-uniapp 已发布 244 个版本（截至 2026-06），最新版本 v4.3.15-beta.1。GitHub 获 557 stars、103 forks、30+ 贡献者，是 uni-app 生态中最活跃的社区 UI 库之一。

设计规范#

京东 APP 10.0 视觉规范：统一的设计语言，现代简约风格
暗黑模式：通过 CSS 变量切换，支持系统跟随
国际化：内置多语言支持，支持自定义 locale
主题定制：通过 SCSS 变量和 CSS 变量动态定制主题
按需加载：支持 unplugin-auto-import 自动按需导入
组件分类：基础组件、表单组件、反馈组件、展示组件、导航组件、布局组件

审核规范#

组件库基于各平台原生组件封装，不涉及 webview
全量引入会增加约 300-500KB 包体，强烈建议使用按需加载
小程序端使用 nutui-uniapp 自动适配，无需额外配置
各平台组件兼容性矩阵详见官方文档

开发指南#

快速上手#

code

# 创建 uni-app + Vue3 + TS 项目（如使用 CLI）
npx degit dcloudio/uni-preset-vue#vite-ts my-app
cd my-app

# 安装
npm install nutui-uniapp

# 安装自动导入插件
npm install -D unplugin-auto-import unplugin-vue-components

code

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NutuiResolver } from 'nutui-uniapp'

export default {
  plugins: [
    AutoImport({
      resolvers: [NutuiResolver()],
    }),
    Components({
      resolvers: [NutuiResolver()],
    }),
  ],
}

code

<!-- 直接使用组件，无需手动 import -->
<template>
  <nut-button type="primary" @click="handleClick">
    按钮
  </nut-button>
</template>

<script setup lang="ts">
function handleClick() {
  console.log('clicked')
}
</script>

常见陷阱#

Vue 3 + Vite 必须：仅支持 Vue 3 和 Vite 构建工具，不支持 Vue 2 或 Webpack
按需加载配置：必须配置 unplugin-auto-import 和 unplugin-vue-components，否则样式可能缺失
与 NutUI (Taro 版) 的区别：NutUI 官方版基于 Taro+React，本库基于 uni-app+Vue3，API 有部分调整
小程序特殊限制：部分组件在小程序端有功能裁剪（如部分动画效果），参考兼容性文档
uni-app 版本要求：需要 uni-app 3.x+（Vue 3 模式）

从 NutUI (Taro) 迁移#

React 语法 → Vue 3 SFC 语法
组件名：PascalCase 一致（<NutButton> → <nut-button>，uni-app 使用 kebab-case）
事件绑定：onClick → @click
条件渲染：JSX {condition && <Comp/>} → Vue v-if

生态资源#

社区资源#

版本更新#

v4.3.15-beta.1（2026-06）：最新版本，持续迭代
v4.x 系列：80+ 组件，暗黑模式，国际化
v3.x 系列：60+ 组件，基础功能完善
244 个 npm 版本：自 2023-06 高频迭代
活跃维护中，月均 8-10 个版本发布

特性

详细文档

NutUI UniApp#

资源概述#

设计规范#

审核规范#

开发指南#

快速上手#

常见陷阱#

从 NutUI (Taro) 迁移#

生态资源#

推荐框架#

相关 UI 库#

社区资源#

版本更新#

支持平台