# vue3+vant4+vite+pinia+ts+axios

**Repository Path**: personal-projects_best/vue3-vant4-vite-pinia-ts-axios

## Basic Information

- **Project Name**: vue3+vant4+vite+pinia+ts+axios
- **Description**: 这是一个基于 Vue3 + TypeScript + Vite + Vant 的移动端项目模板，集成了多个实用功能和最佳实践，帮助你快速开发高质量的移动端应用。本模板提供完整的用户认证流程、状态管理示例和 Mock 数据服务，可以直接用于实际项目开发。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://47.109.203.182/openSource/v3-template-mobile/#/
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2025-03-11
- **Last Updated**: 2025-12-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 移动端项目模板

## 项目介绍

这是一个基于 Vue3 + TypeScript + Vite + Vant 的移动端项目模板，集成了多个实用功能和最佳实践，帮助你快速开发高质量的移动端应用。本模板提供完整的用户认证流程、状态管理示例和 Mock 数据服务，可以直接用于实际项目开发。

### 技术栈

- 核心框架：Vue 3
- 开发语言：TypeScript
- 构建工具：Vite
- UI 组件库：Vant 4
- 状态管理：Pinia
- 路由管理：Vue Router
- 工具库：VueUse
- 移动端适配：postcss-pxtorem + lib-flexible

## 快速开始

### 环境准备

- Node.js >= 16.0.0
- npm >= 7.0.0

### 安装依赖

```bash
npm install
```

### 开发服务

```bash
npm run dev
```

启动后访问：http://localhost:5177

### 项目打包

```bash
npm run build
```

## 项目特性

- 📱 移动端适配：使用 postcss-pxtorem 实现响应式布局
- 🔥 最新技术栈：使用 Vue3/Vite4/Pinia/TypeScript 等前端前沿技术
- 📦 组件自动导入：基于 unplugin-vue-components 实现
- 🎨 UI 组件库：集成 Vant4，提供丰富的移动端组件
- 💪 TypeScript：应用程序级 JavaScript 的语言支持
- 🔢 状态管理：集成 Pinia，轻量级状态管理方案
- 📱 常用布局：提供移动端常用布局示例
- 🔐 用户认证：完整的登录注册流程
- 🎯 Mock 数据：集成 Mock 服务，快速开发

## 目录结构

```
├── public/              # 静态资源
├── src/                 # 源代码
│   ├── assets/         # 静态资源
│   ├── components/     # 公共组件
│   ├── router/         # 路由配置
│   ├── stores/         # 状态管理
│   ├── types/          # 类型定义
│   ├── views/          # 页面组件
│   ├── mock/          # Mock 数据
│   ├── service/       # API 服务
│   ├── utils/         # 工具函数
│   ├── App.vue         # 根组件
│   └── main.ts         # 入口文件
├── index.html          # HTML 模板
├── tsconfig.json       # TypeScript 配置
├── vite.config.ts      # Vite 配置
└── package.json        # 项目配置
```

## 开发指南

### 用户认证

项目内置了完整的用户认证流程，包括：

1. 登录/注册功能
```typescript
// 用户登录
const { token, userInfo } = await userApi.login({
  username: 'admin',
  password: '123456'
});

// 获取用户信息
const userInfo = await userApi.getUserInfo();
```

2. Token 管理
```typescript
// 存储 token
localStorage.setItem('token', token);

// 检查登录状态
const checkLoginStatus = () => {
  const token = localStorage.getItem('token');
  return !!token;
};
```

### 状态管理

使用 Pinia 进行状态管理：

1. 定义 Store
```typescript
// stores/user.ts
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    isLoggedIn: false
  }),
  actions: {
    setUserInfo(info) {
      this.userInfo = info;
      this.isLoggedIn = true;
    }
  }
});
```

2. 在组件中使用
```typescript
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
userStore.setUserInfo(userInfo);
```

### Mock 数据

项目集成了 Mock 服务，可以快速模拟 API 响应：

1. 在 `src/mock` 目录下添加 Mock 数据
```typescript
// mock/user.ts
export default {
  'POST /api/login': (req) => {
    return {
      code: 0,
      data: {
        token: 'mock-token',
        userInfo: {
          username: 'admin',
          role: '管理员'
        }
      }
    };
  }
};
```

### 组件开发

1. Vant 组件使用
```vue
<template>
  <van-button type="primary" @click="handleClick">
    按钮
  </van-button>
</template>
```

2. 自定义组件
```vue
<!-- components/MyComponent.vue -->
<script setup lang="ts">
defineProps<{
  title: string
}>();
</script>

<template>
  <div class="my-component">
    {{ title }}
  </div>
</template>
```

### 样式开发

- 支持 CSS 预处理器
- 移动端适配已配置，直接使用 px 单位即可
- 建议使用 Vant 设计规范

```css
.container {
  padding: 16px;  /* 会自动转换为 rem */
  font-size: 14px;
}
```

## 最佳实践

1. TypeScript 规范
- 始终为组件的 props 和响应式数据定义类型
- 使用接口定义 API 响应数据结构
- 避免使用 any 类型

2. 性能优化
- 合理使用异步组件
- 图片资源使用 CDN
- 控制依赖包大小

3. 移动端适配
- 使用 rem 单位
- 注意点击区域大小
- 考虑弱网环境

4. 代码风格
- 使用组合式 API
- 遵循 Vue3 最佳实践
- 保持组件颗粒度

## 相关文档

- [Vue3 文档](https://cn.vuejs.org/)
- [Vite 文档](https://cn.vitejs.dev/)
- [Vant 文档](https://vant-ui.github.io/vant/#/zh-CN)
- [TypeScript 文档](https://www.typescriptlang.org/)
- [Pinia 文档](https://pinia.vuejs.org/)