# love-vant

**Repository Path**: jsz315/love-vant

## Basic Information

- **Project Name**: love-vant
- **Description**: vant模版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-10
- **Last Updated**: 2025-09-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Love3 - Taro + Vue3 + Vant + Tailwind CSS 技术框架

## 项目简介

Love3 是一个基于 Taro 4.x + Vue 3 + Vant + Tailwind CSS 的现代化小程序开发框架，提供完整的开发工具链和最佳实践。

## 技术栈

- **Taro 4.1.6** - 多端统一开发框架
- **Vue 3.4.0** - 渐进式 JavaScript 框架
- **TypeScript 4.1.0** - JavaScript 的超集
- **Vant 4.9.15** - 轻量、可靠的移动端组件库
- **Tailwind CSS 3.4.0** - 实用优先的 CSS 框架
- **Pinia 2.1.7** - Vue 的状态管理库

## 项目结构

```
love3/
├── config/                 # 配置文件
│   ├── index.js           # 主配置
│   ├── dev.js             # 开发环境配置
│   └── prod.js            # 生产环境配置
├── src/
│   ├── app.config.ts      # 应用配置
│   ├── app.ts             # 应用入口
│   ├── app.scss           # 全局样式
│   ├── pages/             # 页面目录
│   │   ├── index/         # 首页
│   │   ├── activities/    # 活动页面
│   │   ├── matchmaker/    # 红娘页面
│   │   ├── favorites/     # 收藏页面
│   │   └── mine/          # 个人中心
│   ├── components/        # 组件目录
│   ├── stores/            # 状态管理
│   ├── utils/             # 工具函数
│   └── assets/            # 静态资源
├── package.json           # 项目依赖
├── tailwind.config.js     # Tailwind 配置
├── tsconfig.json          # TypeScript 配置
└── babel.config.js        # Babel 配置
```

## 功能特性

### 🏠 首页
- 项目介绍和技术栈展示
- Tab 页面导航
- 响应式设计

### 🎉 活动页面
- 活动列表展示
- 简洁的页面布局

### 💕 红娘页面
- 红娘信息展示
- 专业红娘服务

### ⭐ 收藏页面
- 用户收藏内容管理
- 收藏列表展示

### 👤 个人中心
- 个人信息管理
- 设置和配置

## 开发指南

### 安装依赖

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

### 开发模式

```bash
# 微信小程序
npm run dev:weapp

# H5
npm run dev:h5

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

### 构建生产版本

```bash
# 微信小程序
npm run build:weapp

# H5
npm run build:h5

# 支付宝小程序
npm run build:alipay
```

## 配置说明

### Tailwind CSS 配置

项目已配置 Tailwind CSS，支持：
- 自定义主题色彩
- 响应式设计
- 动画效果
- 小程序兼容性

### Vant 组件库

已集成 Vant 组件库，支持：
- 按需引入
- 主题定制
- 小程序适配

### 状态管理

使用 Pinia 进行状态管理：
- 用户信息管理
- 应用配置管理
- 响应式状态

## 开发规范

### 代码规范

- 使用 TypeScript 进行类型检查
- 遵循 Vue 3 Composition API 规范
- 使用 ESLint 进行代码检查
- 使用 Prettier 进行代码格式化

### 样式规范

- 优先使用 Tailwind CSS 原子类
- 自定义样式使用 SCSS
- 遵循移动端设计规范
- 支持深色模式

### 组件规范

- 使用 `<script setup>` 语法
- 组件命名使用 PascalCase
- 提供完整的 TypeScript 类型定义
- 添加 JSDoc 注释

## 部署说明

### 微信小程序

1. 执行构建命令：`npm run build:weapp`
2. 使用微信开发者工具打开 `dist` 目录
3. 配置小程序 AppID
4. 上传代码并提交审核

### H5 部署

1. 执行构建命令：`npm run build:h5`
2. 将 `dist` 目录部署到服务器
3. 配置服务器支持 SPA 路由

## 贡献指南

1. Fork 项目
2. 创建特性分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 许可证

MIT License

## 联系方式

- 邮箱：contact@love3.dev
- GitHub：github.com/love3
- 微信群：扫码加入技术交流群

---

**Love3** - 让小程序开发更简单、更高效！



https://www.love.nl9555.com?mid=029243048&mkid=250155724

## 提示词

使用以下技术栈完成页面：

Taro 4.1.6 - 多端统一开发框架
Vue 3.4.0 - 渐进式 JavaScript 框架
TypeScript 4.1.0 - JavaScript 超集
Vant 4.9.15 - 轻量可靠的移动端组件库
Tailwind CSS 3.4.0 - 实用优先的 CSS 框架
Pinia 2.1.7 - Vue 状态管理库
布局和样式要求：

页面宽度设置为750px，所有图片需缩放至750px。
使用 class 属性定义样式，如 class="text-[32px] text-[#999]"，避免使用 style 属性。
精确还原布局、样式、字体大小、颜色和尺寸，确保与参考图片一致。
不要添加图片中没有的内容，严格按照图片要求还原页面。