五、主题定制
5.1 CSS Variables动态主题
NutUI 4.0引入了CSS Variables动态主题能力，通过ConfigProvider组件可以实现在项目运行时动态切换主题。
<template>
<nut-config-provider :theme-vars="themeVars">
<nut-button type="primary">主要按钮</nut-button>
</nut-config-provider>
</template>
<script setup>
import { reactive } from 'vue';
const themeVars = reactive({
buttonBorderRadius: '10px',
primaryColor: '#478EF2'
});
</script>
5.2 品牌色与灰阶体系
NutUI对CSS变量进行了视觉和语义的拆解，提炼出了品牌色和灰阶：
/* 品牌色 */
--nutui-brand-color: #fa2c19;
--nutui-brand-color-start: #ff404f;
--nutui-brand-color-end: #fa2c19;
/* 灰阶色系 */
--nutui-gray-0: #000000; /* 纯黑 */
--nutui-gray-1: #1a1a1a; /* 主要内容文字 */
--nutui-gray-2: #757575; /* 次要文字 */
--nutui-gray-3: #bfbfbf; /* 不可操作内容 */
--nutui-gray-4: #f4f4f4; /* 页面基底色 */
--nutui-gray-5: #f8f8f8; /* 卡片内嵌背景 */
--nutui-gray-6: #ffffff; /* 卡片背景色 */
--nutui-gray-7: rgba(0,0,0,0.7); /* 全局蒙层 */
--nutui-gray-8: rgba(0,0,0,0.4); /* 局部蒙层 */
--nutui-gray-9: rgba(0,0,0,0.08); /* 间隔线 */
--nutui-gray-10: rgba(0,0,0,0.02); /* 图片容错蒙层 */
5.3 SCSS变量定制
NutUI也支持传统的SCSS变量主题定制方式：
// 新建 custom_theme.scss
// 主色调定制
$primary-color: #478EF2;
$primary-color-end: #496AF2;
// 在vite.config.ts中配置
export default {
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/custom_theme.scss";@import "@nutui/nutui/dist/styles/variables.scss";`
}
}
}
}
5.4 暗黑主题
NutUI提供了暗黑主题支持，只需引入主题文件即可：
import '@nutui/nutui/dist/styles/theme-dark.scss';
5.5 ConfigProvider组件
NutUI提供了ConfigProvider组件，通过此组件可以对主题进行全局配置：
<template>
<nut-config-provider :theme="darkTheme">
<nut-button type="primary">提交</nut-button>
</nut-config-provider>
</template>
<script setup>
const darkTheme = {
nutuiBrandColor: 'green',
nutuiBrandColorStart: 'green',
nutuiBrandColorEnd: 'green'
};
</script>
六、无障碍支持
6.1 无障碍属性规范
NutUI对组件进行了无障碍适配，为辅助技术提供了完善的支持。
无障碍属性定义：
6.2 读取顺序
辅助技术读取顺序为：ariaLabel → value → ariaRole → hint。
6.3 组件使用示例
在项目中使用无障碍属性：
<template>
<nut-checkbox
:checked="checked"
ariaLabel="接受用户协议"
>
我已阅读并同意用户协议
</nut-checkbox>
</template>
七、性能优化
7.1 按需加载
按需加载是NutUI性能优化的核心手段，配置方法已在第二章详细介绍。通过按需加载，初始包体积可减少60%以上。
7.2 Tree-shaking
确保项目正确配置了Tree-shaking：
在package.json中设置"sideEffects": false
使用ES模块语法（import/export）而非CommonJS
生产环境构建时启用压缩和优化
7.3 图片懒加载
使用NutUI的Image组件，内置了懒加载功能：
<template>
<nut-image
src="https://example.com/image.jpg"
lazy-load
placeholder="loading.png"
/>
</template>
7.4 组件缓存
合理使用Vue的缓存机制可以显著提升NutUI组件的渲染性能：
<template>
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-else />
</template>
7.5 优化效果
通过上述优化手段，可以对NutUI项目进行显著优化：
初始加载时间：从2.8秒减少到0.9秒（提升68%）
包体积：从450KB减少到145KB（减少68%）
内存占用：降低约40%
页面切换响应时间：从300ms减少到80ms（提升73%）
八、最佳实践
8.1 项目结构建议
对于使用NutUI的大型项目，建议采用以下目录结构：
src/
├── components/
│ ├── common/ # 通用组件（基于NutUI封装）
│ │ ├── SearchBar.vue
│ │ ├── DataList.vue
│ │ └── ModalForm.vue
│ └── business/ # 业务组件
├── composables/
│ ├── useList.ts # 列表逻辑封装
│ ├── useForm.ts # 表单逻辑封装
│ └── useRequest.ts # 请求逻辑封装
├── styles/
│ ├── variables.scss # 主题变量覆盖
│ └── global.scss # 全局样式
└── types/
└── nutui.d.ts # NutUI类型扩展
8.2 开发调试
# 启动H5开发服务器
pnpm run dev
# 启动微信小程序开发
pnpm run dev:taro weapp
# 启动京东小程序开发
pnpm run dev:taro jd
8.3 构建打包
# 生产环境构建
pnpm run build
# 多端构建
pnpm run build:taro
NutUI作为京东开源的移动端Vue组件库，凭借其轻量级、高性能、多端适配的核心理念，以及超过70个高质量组件，已经成为移动端应用开发的首选方案之一。
来源：
http://lemci.cn/
