# uniapp-vue3-template

基于 Vue3 + Vite + Pinia + uview-plus 的 UniApp 项目模板

## 技术栈

- **核心框架**: Vue3 + Vite
- **状态管理**: Pinia（配置持久化存储）
- **UI组件库**: uview-plus
- **日期处理**: dayjs
- **多端支持**: H5、微信小程序

## 项目结构

```
uniapp-vue3-template/
├── api/                    # API 接口层
│   ├── modules/           # 业务接口模块
│   │   ├── auth.js        # 登录注册接口
│   │   └── user.js        # 用户相关接口
│   ├── request.js         # HTTP 请求封装
│   └── index.js           # 接口统一导出
├── components/            # 组件目录
│   ├── common/           # 公共组件
│   │   ├── lazy-image.vue # 图片懒加载
│   │   ├── empty-state.vue # 空状态组件
│   │   └── page-container.vue # 页面容器
│   └── layout/           # 布局组件
│       ├── layout-header.vue  # 头部导航
│       ├── layout-footer.vue  # 底部标签栏
│       └── layout-sidebar.vue # 侧边栏
├── pages/                 # 主包页面
│   ├── index/            # 首页
│   ├── login/            # 登录页
│   ├── register/         # 注册页
│   ├── user/             # 个人中心
│   └── demo/             # 组件演示
├── store/                 # Pinia 状态管理
│   ├── user.js           # 用户状态
│   ├── app.js            # 应用状态
│   └── index.js          # 状态管理入口
├── styles/                # 样式文件
│   ├── uni.scss          # 全局样式
│   └── variable.scss     # SCSS 变量
├── subpkg/                # 分包目录
│   ├── goods/            # 商品模块
│   └── order/            # 订单模块
├── utils/                 # 工具函数
│   ├── storage.js        # 本地存储
│   ├── validate.js       # 表单验证
│   ├── format.js         # 格式化工具
│   └── index.js          # 工具导出
├── App.vue               # 应用入口
├── main.js               # 应用配置
├── manifest.json         # 应用配置文件
├── pages.json            # 页面配置
├── package.json          # 项目依赖
└── vite.config.js        # Vite 配置
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
# H5 开发
npm run dev:h5

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

### 构建生产

```bash
# H5 构建
npm run build:h5

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

## 功能特性

- ✅ Pinia 状态管理 + 持久化存储
- ✅ uview-plus 组件库集成
- ✅ dayjs 日期处理
- ✅ HTTP 请求封装（拦截器）
- ✅ 路由分包加载
- ✅ 图片懒加载组件
- ✅ 页面缓存策略
- ✅ 登录/注册功能模块
- ✅ 基础布局组件（头部、底部、侧边栏）
- ✅ 常用工具函数

## API 使用

```javascript
import { get, post } from '@/api'
import { login, register } from '@/api/modules/auth'

// GET 请求
const list = await get('/user/list', { page: 1, pageSize: 10 })

// POST 请求
const res = await login({ username: 'admin', password: '123456' })
```

## Store 使用

```javascript
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 设置用户信息
userStore.setUserInfo({ id: '1', username: 'admin' })

// 获取状态
const isLoggedIn = userStore.isLoggedIn

// 退出登录
userStore.logout()
```

## 页面缓存

```javascript
import { useAppStore } from '@/store/app'

const appStore = useAppStore()

// 添加页面缓存
appStore.addCachePage('user-profile')

// 移除页面缓存
appStore.removeCachePage('user-profile')

// 清空缓存
appStore.clearCache()
```

## 注意事项

1. 首次运行需要安装依赖
2. 开发 H5 时访问 `http://localhost:3000`
3. 微信小程序需要配置 AppID
4. 记得修改 API 请求的 BASE_URL

## License

MIT