# new Template

**Repository Path**: xiaofeiwuu/new-template

## Basic Information

- **Project Name**: new Template
- **Description**:  新的模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-20
- **Last Updated**: 2025-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Vant4 移动端应用模板

## 项目概述

这是一个基于 Vue3、Vant4 和 UnoCSS 的高效移动端项目模板，集成了主流开发工具和最佳实践，适合快速搭建现代移动端应用。该模板提供了完整的用户认证流程、移动端适配方案、组件封装和开发工具链配置，可直接投入使用进行业务开发。

## 技术栈

### 核心框架
- **Vue 3**：采用 Composition API 和 `<script setup>` 语法
- **Vant 4**：轻量、可靠的移动端组件库
- **Vite**：下一代前端构建工具，提供极速的开发体验

### 状态管理与路由
- **Pinia**：Vue 官方推荐的状态管理方案
- **Vue Router**：官方路由管理器，支持基于文件系统的自动路由生成

### CSS 解决方案
- **UnoCSS**：原子化 CSS 框架，支持按需生成
- **PostCSS**：CSS 后处理器，集成移动端适配方案

### 数据请求
- **Axios**：基于 Promise 的 HTTP 客户端
- **Vue Request**：基于 Vue 3 的请求库，支持请求缓存、防抖等高级功能

### 开发工具
- **ESLint**：代码质量检查工具
- **Prettier**：代码格式化工具
- **Stylelint**：CSS 代码检查工具

### 自动化特性
- **自动导入 API**：无需手动导入 Vue、Vue Router、Pinia 的 API
- **自动导入组件**：自动注册 Vant 组件和项目组件
- **基于文件的路由**：根据页面文件结构自动生成路由配置

## 项目结构

```
src/
├── api/                # API 接口定义
│   ├── auth.js         # 认证相关接口
│   └── user.js         # 用户相关接口
├── assets/             # 静态资源目录
├── components/         # 公共组件
│   ├── BaseButton.vue  # 基础按钮组件
│   ├── BaseNavBar.vue  # 顶部导航栏组件
│   └── Tabbar.vue      # 底部标签栏组件
├── pages/              # 页面组件（自动生成路由）
│   ├── 404.vue         # 404页面
│   ├── auth/           # 认证相关页面
│   │   ├── login.vue   # 登录页面
│   │   ├── register.vue # 注册页面
│   │   └── change-password.vue # 修改密码页面
│   ├── docs/           # 文档页面
│   ├── home/           # 首页
│   └── mine/           # 个人中心页面
├── router/             # 路由配置
│   └── index.js        # 路由主配置文件
├── stores/             # Pinia 状态存储
│   └── user.js         # 用户状态管理
├── styles/             # 全局样式
│   ├── main.css        # 主样式文件
│   └── utils.css       # 工具类样式
├── types/              # TypeScript 类型定义
├── utils/              # 工具函数
│   ├── amountUtils.js  # 金额处理工具
│   ├── auth-guard.js   # 路由认证守卫
│   ├── encrypt.js      # 加密工具
│   ├── request.js      # Axios 封装
│   ├── secureStorage.js # 安全存储工具
│   ├── timeUtils.js    # 时间处理工具
│   └── useRequest.js   # 请求 Hook 封装
├── App.vue             # 应用根组件
└── main.js             # 应用入口文件
```

## 功能特性

### 完整的用户认证流程
- 登录/注册/修改密码页面
- 基于 Token 的认证机制
- 路由守卫控制页面访问权限
- 数据加密存储确保安全

### 移动端适配方案
- 基于 `postcss-mobile-forever` 实现移动端适配
- 自动处理安全区域适配（刘海屏、底部操作条等）
- 1px 边框处理

### UI 组件封装
- 基础按钮组件统一样式
- 导航栏组件支持标题和返回
- Tabbar 组件自动路由切换

### 数据处理工具
- 安全的本地存储（加密/解密）
- 统一的 API 请求封装
- 常用工具函数（时间、金额格式化等）

### 开发效率提升
- 自动导入减少样板代码
- 文件系统路由简化配置
- 代码规范自动化（ESLint + Prettier + Stylelint）


## 开发指南

### 安装依赖
```bash
pnpm install
```

### 启动开发服务器
```bash
pnpm dev
```

### 构建生产版本
```bash
pnpm build
```

### 代码质量检查
```bash
pnpm lint
```

### 代码格式化
```bash
pnpm lint:fix
```

## 最佳实践

### 页面开发
- 在 `src/pages` 目录下创建页面，文件结构即路由结构
- 可以在Vue文件底部使用 `<route>` 块定义路由元信息
- 使用 `meta.keepAlive` 控制页面缓存
- 使用 `meta.showNavBar` 控制是否显示导航栏
- 使用 `meta.hideTabbar` 控制是否隐藏底部标签栏

### API 调用
- 在 `src/api` 目录下按模块定义 API 函数
- 使用 `useGet`、`usePost` 等封装的请求函数
- 处理请求状态、错误和加载指示器

### 状态管理
- 使用 Pinia 进行状态管理
- 按领域划分 store（如 user、product 等）
- 利用 `secureStorage` 存储敏感数据

### 样式开发
- 优先使用 UnoCSS 的原子类
- 需要复用的样式放在 `src/styles/utils.css`
- 全局基础样式在 `src/styles/main.css`