# front-debi

**Repository Path**: hyxc_01/front-debi

## Basic Information

- **Project Name**: front-debi
- **Description**: 真赚真赚真赚真赚真赚
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fron-wechat-template

UniApp Vue3 框架模板 - 快速开发微信小程序

## 项目简介

这是一个基于 UniApp + Vue3 + Pinia + uview-plus 的微信小程序框架模板，提供了完整的项目基础架构，包含路由系统、状态管理、API 层、认证系统等核心功能，帮助你快速启动新项目。

## 技术栈

- **框架**: UniApp + Vue3 Composition API
- **状态管理**: Pinia + pinia-plugin-persistedstate
- **UI组件**: uview-plus
- **路由**: uniapp-router-next
- **HTTP请求**: axios + uni-helper/axios-adapter
- **构建工具**: Vite
- **包管理器**: pnpm

## 目录结构

```
fron-wechat-template/
├── src/
│   ├── api/                    # API 接口层
│   │   ├── modules/            # API 模块
│   │   └── index.js            # API 统一导出
│   ├── components/             # 公共组件
│   │   ├── navbar/             # 自定义导航栏
│   │   ├── tabbar/             # 自定义 TabBar
│   │   ├── card/               # 卡片组件
│   │   └── scroll-paging/      # 分页滚动组件
│   ├── hooks/                  # 组合式函数
│   ├── layouts/                # 布局组件
│   ├── pages/                  # 主要页面
│   │   ├── home/               # 首页
│   │   ├── login/              # 登录页
│   │   └── user/               # 用户中心
│   ├── router/                 # 路由配置
│   │   ├── index.js            # 路由初始化
│   │   └── helper.js           # 路由守卫和辅助函数
│   ├── static/                 # 静态资源
│   ├── store/                  # Pinia 状态管理
│   │   ├── modules/            # Store 模块
│   │   └── index.js            # Store 统一导出
│   ├── utils/                  # 工具函数
│   │   ├── router.js           # 路由工具
│   │   └── request.js          # HTTP 请求封装
│   ├── uni_modules/            # uni_modules 插件
│   ├── App.vue                 # 应用入口
│   ├── main.js                 # 主入口文件
│   ├── pages.json              # 页面配置
│   └── uni.scss                # 全局样式变量
├── .env                        # 环境变量
├── .env.development            # 开发环境变量
├── .env.production             # 生产环境变量
├── manifest.config.js          # 应用配置
├── vite.config.js              # Vite 配置
└── package.json                # 项目依赖
```

## 快速开始

### 1. 安装依赖

```bash
# 必须使用 pnpm
pnpm install
```

### 2. 开发环境运行

```bash
# 微信小程序
pnpm run dev:mp-weixin

# H5
pnpm run dev:h5

# APP
pnpm run dev:app
```

### 3. 生产环境构建

```bash
# 微信小程序
pnpm run build:mp-weixin

# H5
pnpm run build:h5

# APP
pnpm run build:app
```

## 核心功能

### 1. 路由系统

使用 `uniapp-router-next` 提供类似 Vue Router 的路由体验：

```javascript
import { push, switchTab, back } from '@/utils/router'

// 普通跳转
push('/pages/detail/index?id=123')

// 对象方式跳转
push({
  path: '/pages/detail/index',
  query: { id: 123 }
})

// TabBar 跳转
switchTab('/pages/home/index')

// 返回
back()
```

### 2. 状态管理

使用 Pinia 管理全局状态，支持持久化：

```javascript
// store/modules/user.js
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    token: '',
    userInfo: {}
  }),
  actions: {
    setToken(token) {
      this.token = token
    },
    setUserInfo(info) {
      this.userInfo = info
    }
  },
  persist: true // 开启持久化
})
```

### 3. API 请求

统一的 API 管理：

```javascript
// api/modules/user.js
import request from '@/utils/request'

export default {
  // 登录
  login: (data) => request({
    url: '/user/login',
    method: 'POST',
    data
  }),

  // 获取用户信息
  getUserInfo: () => request({
    url: '/user/info',
    method: 'GET'
  })
}

// 使用
import api from '@/api'

api.user.login({ phone, code })
```

### 4. 路由守卫

在 `pages.json` 中配置需要登录的页面：

```json
{
  "path": "pages/user/index",
  "style": {
    "navigationBarTitleText": "我的"
  },
  "meta": {
    "requiresAuth": true
  }
}
```

### 5. 自定义组件

#### CustomNavbar - 自定义导航栏

```vue
<template>
  <custom-navbar
    title="页面标题"
    :customBackHandler="true"
    @leftClick="handleBack"
  />
</template>
```

#### CustomTabbar - 自定义底部导航

```vue
<template>
  <custom-tabbar />
</template>
```

## 环境配置

修改 `.env.*` 文件配置不同环境的变量：

```bash
# .env.development
VITE_APP_API_BASEURL = 'http://localhost:3000/api'

# .env.production
VITE_APP_API_BASEURL = 'https://api.example.com'
```

代码中使用：

```javascript
const apiUrl = import.meta.env.VITE_APP_API_BASEURL
```

## 开发建议

1. **组件导入**: uview-plus 组件支持 easycom 自动导入，无需手动注册
2. **路由导航**: 始终使用 `@/utils/router` 中的方法，不要直接使用 uni 原生 API
3. **状态管理**: 使用 `storeToRefs` 解构 store 中的响应式属性
4. **API 模块化**: 按业务模块拆分 API 文件，统一通过 `api/index.js` 导出
5. **代码规范**: 项目已配置 ESLint、Prettier、Stylelint，提交前请检查代码规范

## Git 提交规范

使用 commitizen 规范提交信息：

```bash
pnpm run cz
```

提交类型：
- `feat`: 新功能
- `fix`: 修复 bug
- `refactor`: 重构代码
- `perf`: 性能优化
- `docs`: 文档更新
- `style`: 代码格式调整
- `test`: 测试相关
- `build`: 构建系统
- `ci`: CI 配置

## 常见问题

### 1. 为什么必须使用 pnpm？

项目配置了 `preinstall` 钩子限制只能使用 pnpm，这是为了保证依赖版本一致性。

### 2. 如何添加新页面？

1. 在 `src/pages/` 或 `src/packages/` 创建页面目录
2. 在 `src/pages.json` 中注册页面路由
3. 如果需要登录才能访问，添加 `meta: { requiresAuth: true }`

### 3. 如何修改 TabBar？

修改 `src/pages.json` 中的 `tabBar` 配置，并更新相应的图标文件。

### 4. API 请求如何处理 Token？

Token 在 `src/utils/request.js` 中自动注入到请求头，无需手动添加。

## 许可证

MIT License

## 参考文档

- [UniApp 官方文档](https://uniapp.dcloud.net.cn/)
- [Vue3 官方文档](https://cn.vuejs.org/)
- [Pinia 官方文档](https://pinia.vuejs.org/zh/)
- [uview-plus 官方文档](https://uview-plus.jiangruyi.com/)
- [uniapp-router-next 文档](https://github.com/orca-team/uniapp-router-next)

---

如有问题，欢迎提 Issue 或 PR！