在移动互联网时代，移动端H5应用和小程序的开发效率至关重要。京东作为国内领先的电商平台，其移动端业务场景极为复杂，对组件库的性能、稳定性和跨端能力有着极高的要求。正是在这样的背景下，NutUI应运而生。
NutUI，源自电影《冰河世纪》里松鼠Scrat"执迷不悟"，一生追求，即便引发大灾难也绝不松手的坚果。这个富有故事感的名字，象征着京东技术团队对移动端组件体验的极致追求。
作为京东风格的移动端Vue组件库，NutUI从诞生之初就定位为轻量级、高性能、多端适配的企业级解决方案。它由京东零售前端团队开发和维护，经过京东APP、京东购物小程序等亿级用户产品的检验，已经成为京东内部移动端开发的事实标准。
本文将从核心理念到安装配置，从核心组件到跨端适配，从主题定制到性能优化，系统全面地梳理NutUI的核心知识点，帮助读者建立完整的知识体系，能够熟练运用NutUI构建高质量的移动端应用。
一、NutUI概述
1.1 什么是NutUI
NutUI是京东开源的一款移动端Vue组件库，支持Vue 2、Vue 3和React技术栈，同时基于Taro框架实现了跨多端小程序和H5的能力。它提供了一套高质量的移动端UI组件，帮助开发者快速构建移动端H5应用和多端小程序。
NutUI的核心设计理念可以概括为三个关键词：
1.2 NutUI的版本体系
NutUI经过多年发展，形成了完整的版本体系，覆盖不同的技术栈和业务需求：
1.3 NutUI的核心价值
京东业务实战验证
NutUI并非从零开始的"实验室产品"，而是京东零售前端团队在服务京东APP、京东购物等核心业务过程中，不断沉淀、打磨出来的组件库。它经历了京东11.11、618等大促活动的考验，在稳定性、性能和设计质量上都有充分保障。这种"为真实场景而设计"的基因，使得NutUI在应对复杂移动端业务需求时更加得心应手。真正的一码多端能力
NutUI基于Taro框架，实现了真正意义上的"一套代码，多端运行"。开发者只需编写一套代码，即可编译运行到H5、微信小程序、京东小程序、支付宝小程序、百度小程序等多个平台。这种跨端能力大大降低了多端适配的成本，提升了开发效率。京东视觉规范
NutUI基于京东APP 10.0/11.0视觉规范设计，包含了京东移动端产品多年积累的设计经验和交互规范。这意味着使用NutUI可以快速构建出具有京东品质的移动端应用，无需从零设计视觉规范。
1.4 NutUI的组件体系
NutUI将组件分为7大类别，每类组件都有明确的职责边界：
总计超过70个高质量组件，覆盖移动端开发的绝大部分场景。
二、安装与配置
2.1 环境准备
在使用NutUI之前，请确保开发环境满足以下要求：
Node.js 16.x 或 18.x（推荐）
Vue 3.2.0+ 或 Vue 2.7.0+
Vite 3.x+ / Webpack 5.x+
如使用Taro多端开发，需安装Taro CLI 3.x+
2.2 npm安装
# 安装NutUI Vue版本
npm install @nutui/nutui --save
# 安装NutUI React版本
npm install @nutui/nutui-react --save
# 安装NutUI Taro版本
npm install @nutui/nutui-taro --save
2.3 按需引入（性能优化核心）
NutUI提供了完善的按需引入机制，这是性能优化的核心手段。官方提供了@nutui/nutui-auto-import-resolver自动导入解析器，支持Vite、Webpack等主流构建工具。
安装自动导入解析器
# 使用pnpm（推荐）
pnpm add @nutui/nutui-auto-import-resolver unplugin-vue-components -D
# 使用npm
npm i @nutui/nutui-auto-import-resolver unplugin-vue-components -D
Vite项目配置
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import NutUIResolver from '@nutui/nutui-auto-import-resolver';
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [NutUIResolver()],
}),
],
});
Webpack项目配置
// webpack.config.js
import Components from 'unplugin-vue-components/webpack';
const NutUIResolver = require('@nutui/nutui-auto-import-resolver');
module.exports = {
plugins: [
Components({
resolvers: [NutUIResolver()],
}),
],
};
支持Sass样式变量
如果需要使用Sass和主题变量，可以这样配置：
Components({
resolvers: [NutUIResolver({ importStyle: 'sass' })]
}),
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@nutui/nutui/dist/styles/variables.scss";`
}
}
}
使用效果
配置完成后，在模板中可以直接使用NutUI组件，无需手动导入：
<template>
<nut-button type="primary">主要按钮</nut-button>
<nut-cell title="单元格" value="内容"></nut-cell>
</template>
<script setup>
// 无需手动导入，自动按需引入
</script>
2.4 全量引入（快速上手）
对于小型项目或原型开发，也可以选择全量引入：
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import NutUI from '@nutui/nutui';
import '@nutui/nutui/dist/style.css';
const app = createApp(App);
app.use(NutUI);
app.mount('#app');
2.5 性能优化效果
通过按需引入，可以显著减小打包体积：
来源：
https://oieaw.cn/
