# NutUI

**Repository Path**: basyc/nut-ui

## Basic Information

- **Project Name**: NutUI
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-18
- **Last Updated**: 2026-02-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目说明文档

## 项目简介

这是一个基于 Taro 框架开发的多端应用项目，主要用于构建微信小程序等跨平台应用。项目使用 Vue 3 + NutUI + Sass + TypeScript 技术栈，实现了登录页面和首页等基础功能。

## 技术栈

- **框架**：Taro 4.1.11
- **前端框架**：Vue 3
- **UI 组件库**：NutUI
- **样式预处理器**：Sass
- **开发语言**：TypeScript
- **构建工具**：Vite

## 项目结构

```
test/
├── config/            # 配置文件目录
│   ├── dev.ts         # 开发环境配置
│   ├── index.ts       # 主配置文件
│   └── prod.ts        # 生产环境配置
├── src/               # 源代码目录
│   ├── api/           # API 接口目录
│   │   └── userapi.ts # 用户相关 API
│   ├── pages/         # 页面目录
│   │   ├── index/     # 首页
│   │   └── login/     # 登录页
│   ├── app.config.ts  # 应用配置
│   ├── app.scss       # 全局样式
│   ├── app.ts         # 应用入口
│   └── index.html     # HTML 模板
├── types/             # TypeScript 类型定义
├── package.json       # 项目依赖
└── README.md          # 项目说明文档
```

## 安装和运行

### 安装依赖

```bash
npm install
```

### 运行开发服务器

#### 微信小程序

```bash
npm run dev:weapp
```

#### H5

```bash
npm run dev:h5
```

#### 其他平台

```bash
# 百度小程序
npm run dev:swan

# 支付宝小程序
npm run dev:alipay

# 字节跳动小程序
npm run dev:tt

# QQ 小程序
npm run dev:qq

# 快应用
npm run dev:quickapp

# React Native
npm run dev:rn
```

## 构建命令

### 构建微信小程序

```bash
npm run build:weapp
```

### 构建 H5

```bash
npm run build:h5
```

### 构建其他平台

```bash
# 百度小程序
npm run build:swan

# 支付宝小程序
npm run build:alipay

# 字节跳动小程序
npm run build:tt

# QQ 小程序
npm run build:qq

# 快应用
npm run build:quickapp

# React Native
npm run build:rn
```

## 页面说明

### 登录页面 (login)

- **路径**：`src/pages/login/`
- **功能**：实现用户登录功能，包括昵称输入和登录按钮
- **UI 组件**：使用 NutUI 的 Avatar 和 Button 组件
- **样式**：使用 Sass 预处理器编写样式，实现全屏布局

### 首页 (index)

- **路径**：`src/pages/index/`
- **功能**：应用的首页，可根据业务需求进行扩展

## 注意事项

### 样式处理

1. **全屏高度设置**：
   - 在 `app.scss` 中设置了全局样式，确保页面能够实现全屏效果
   - 在页面样式中使用 `100vh` 单位确保元素能够占据整个屏幕高度

2. **深度选择器**：
   - 在 Vue 3 中，推荐使用 `:deep()` 语法来修改子组件的样式
   - 但在独立的样式文件中，直接使用普通选择器即可

3. **微信小程序样式**：
   - 微信小程序对 CSS 的支持有一些限制，某些高级 CSS 特性可能不被支持
   - 确保使用的样式属性在小程序中是有效的

### 开发建议

1. **代码规范**：
   - 项目使用 ESLint 进行代码检查，确保代码质量
   - 遵循 TypeScript 的类型定义规范，提高代码可维护性

2. **组件使用**：
   - 优先使用 NutUI 提供的组件，确保 UI 风格一致
   - 对于复杂的业务组件，可以考虑封装成自定义组件

3. **性能优化**：
   - 合理使用 Taro 的生命周期钩子
   - 避免在渲染过程中进行复杂的计算
   - 对于大型列表，考虑使用虚拟滚动

4. **多端适配**：
   - 注意不同平台的样式差异，特别是微信小程序和 H5
   - 使用 Taro 提供的平台判断能力，针对不同平台进行适配

## 常见问题

### 样式不生效

- **问题**：设置了 `height: 100%` 但不是全屏
- **解决方案**：确保父元素链都设置了高度，或使用 `100vh` 单位

### 深度选择器使用

- **问题**：在独立样式文件中使用深度选择器导致样式失效
- **解决方案**：在独立样式文件中直接使用普通选择器，不需要深度选择器

### 小程序编译错误

- **问题**：编译到微信小程序时出现错误
- **解决方案**：检查是否使用了小程序不支持的 CSS 特性，或是否有语法错误

## 联系方式

如有任何问题或建议，欢迎联系项目维护人员。