# nl-uniapp

基于 Vue3 + Vite + Ant Design Vue 的 uni-app 项目模板

## 技术栈

- **框架**: Vue 3
- **构建工具**: Vite
- **UI组件库**: Ant Design Vue 4.x
- **状态管理**: Pinia
- **HTTP请求**: Axios (已封装)
- **样式预处理**: Sass/SCSS

## 项目结构

```
nl-uniapp/
├── pages/              # 页面目录
│   └── index/          # 首页
├── src/
│   ├── api/            # API接口
│   │   └── index.js    # 接口定义
│   ├── stores/         # Pinia状态管理
│   │   └── user.js     # 用户状态
│   ├── utils/          # 工具函数
│   │   └── request.js  # axios封装
│   └── styles/         # 样式文件
│       ├── common.scss # 公共样式
│       └── variables.scss # 样式变量
├── static/             # 静态资源
├── App.vue             # 应用入口
├── main.js             # 主入口文件
├── pages.json          # 页面配置
├── manifest.json       # 应用配置
├── vite.config.js      # Vite配置
└── package.json        # 项目配置
```

## 快速开始

### 安装依赖

```bash
npm install
# 或
yarn install
# 或
pnpm install
```

### 开发运行

```bash
# H5
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

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

# 其他平台...
```

### 构建打包

```bash
# H5
npm run build:h5

# 微信小程序
npm run build:mp-weixin

# 其他平台...
```

## 功能特性

### 1. Axios封装

已封装好的axios请求工具，位于 `src/utils/request.js`，包含：

- 请求/响应拦截器
- 自动添加token
- 统一错误处理
- Loading状态管理
- 支持GET、POST、PUT、DELETE、文件上传等方法

使用示例：

```javascript
import { api } from '@/api'

// GET请求
const res = await api.getList({ page: 1 })

// POST请求
const res = await api.create({ name: '测试' })
```

### 2. 状态管理

使用Pinia进行状态管理，示例store位于 `src/stores/user.js`

### 3. API接口管理

所有API接口统一管理在 `src/api/index.js`，方便维护和调用

### 4. 样式系统

- 支持SCSS预处理器
- 统一的样式变量定义
- 公共样式类

## 注意事项

1. **Ant Design Vue兼容性**: Ant Design Vue主要针对H5端，在小程序端可能不完全兼容，建议：
   - H5端使用Ant Design Vue组件
   - 小程序端使用uni-app原生组件或uni-ui组件库

2. **API配置**: 请在 `src/utils/request.js` 中修改 `baseURL` 为你的实际API地址

3. **Token管理**: Token会自动从store中获取并添加到请求头，请确保正确设置token

## 开发建议

1. 页面开发时，优先使用uni-app原生组件以保证跨平台兼容性
2. 样式使用rpx单位以适配不同屏幕尺寸
3. API请求统一使用封装好的request工具
4. 状态管理使用Pinia，避免直接使用localStorage

## License

MIT