# LIMO来刻 - 基于Taro+Vue3的小程序开发框架

## 项目简介

LIMO来刻是一个基于 Taro 3.6 + Vue3 + TypeScript 的小程序开发框架，提供了完整的开发工具链和组件库，帮助开发者快速构建高质量的小程序应用。

## 技术栈

- **框架**: Taro 3.6.34
- **前端**: Vue3 + TypeScript
- **样式**: Sass
- **构建工具**: Webpack5
- **包管理**: npm

## 目录结构

```
client/
├── src/
│   ├── components/          # 通用组件
│   │   ├── CommonButton/    # 通用按钮组件
│   │   └── index.ts        # 组件导出
│   ├── pages/              # 页面
│   │   └── index/          # 首页
│   ├── services/           # 服务层
│   │   └── request.ts      # 网络请求服务
│   ├── utils/              # 工具函数
│   │   └── index.ts        # 工具函数集合
│   ├── constants/          # 常量
│   │   └── index.ts        # 应用常量
│   ├── stores/             # 状态管理
│   ├── hooks/              # 自定义hooks
│   ├── assets/             # 静态资源
│   │   ├── images/         # 图片资源
│   │   └── icons/          # 图标资源
│   ├── app.ts              # 应用入口
│   ├── app.scss            # 全局样式
│   └── app.config.ts       # 应用配置
├── config/                 # 项目配置
├── types/                  # 类型定义
├── package.json
├── tsconfig.json
└── README.md
```

## 开发指南

### 安装依赖

```bash
npm install
```

### 开发命令

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

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

# 抖音小程序开发
npm run dev:tt

# H5开发
npm run dev:h5

# 百度小程序开发
npm run dev:swan

# QQ小程序开发
npm run dev:qq

# 京东小程序开发
npm run dev:jd
```

### 构建命令

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

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

# 构建抖音小程序
npm run build:tt

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

### 测试命令

```bash
# 运行测试
npm test
```

## 主要特性

### 🚀 快速开发
- 基于 Taro 框架，一次编写，多端运行
- 提供完整的项目脚手架和开发工具链
- 支持热重载和快速编译

### 💎 现代化技术栈
- Vue3 Composition API
- TypeScript 类型支持
- Sass 样式预处理器
- ESLint 代码规范

### 🛠️ 工具完善
- 内置常用工具函数
- 封装网络请求服务
- 提供通用组件库
- 完整的类型定义

### 📱 多端兼容
- 微信小程序
- 支付宝小程序
- 抖音小程序
- H5
- 百度小程序
- QQ小程序
- 京东小程序

## 核心功能

### 网络请求服务

```typescript
import request from '@/services/request'

// GET请求
const data = await request.get('/api/user/info')

// POST请求
const result = await request.post('/api/user/login', {
  username: 'admin',
  password: '123456'
})
```

### 工具函数

```typescript
import { formatDate, debounce, throttle } from '@/utils'

// 格式化日期
const formattedDate = formatDate(new Date(), 'YYYY-MM-DD')

// 防抖函数
const debouncedFn = debounce(handleSearch, 300)

// 节流函数
const throttledFn = throttle(handleScroll, 100)
```

### 通用组件

```vue
<template>
  <CommonButton 
    type="primary" 
    size="large" 
    :loading="loading"
    @click="handleClick"
  >
    按钮文字
  </CommonButton>
</template>

<script setup lang="ts">
import { CommonButton } from '@/components'
</script>
```

## 开发规范

### 文件命名
- 组件文件使用 PascalCase: `CommonButton.vue`
- 页面文件使用 kebab-case: `user-profile.vue`
- 工具函数文件使用 kebab-case: `format-utils.ts`

### 代码规范
- 使用 ESLint 进行代码检查
- 使用 TypeScript 进行类型检查
- 使用 Prettier 进行代码格式化

### 提交规范
- feat: 新功能
- fix: 修复bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 重构代码
- test: 测试相关

## 环境配置

### 开发环境
- Node.js >= 18.0.0
- npm >= 8.0.0

### 微信小程序开发
1. 下载并安装微信开发者工具
2. 导入项目的 `dist` 目录
3. 配置小程序 AppID

### 支付宝小程序开发
1. 下载并安装支付宝小程序开发者工具
2. 导入项目的 `dist` 目录
3. 配置小程序 AppID

## 部署说明

### 小程序发布
1. 使用对应的开发者工具打开构建后的 `dist` 目录
2. 点击"上传"按钮上传代码
3. 在小程序管理后台提交审核

### H5部署
1. 构建H5版本: `npm run build:h5`
2. 将 `dist` 目录部署到服务器
3. 配置nginx或apache服务器

## 常见问题

### Q: 如何添加新页面？
A: 在 `src/pages` 目录下创建新页面文件夹，并在 `app.config.ts` 中添加页面路径。

### Q: 如何使用自定义组件？
A: 在 `src/components` 目录下创建组件，并在 `components/index.ts` 中导出。

### Q: 如何配置网络请求？
A: 在 `src/constants/index.ts` 中修改 `API_CONFIG` 配置。

### Q: 如何添加全局样式？
A: 在 `src/app.scss` 中添加全局样式。

## 贡献指南

1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 许可证

本项目使用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 联系我们

- 项目地址: [GitHub仓库链接]
- 问题反馈: [GitHub Issues]
- 邮箱: [联系邮箱]

---

感谢使用 LIMO来刻！如果这个项目对您有帮助，请给我们一个 ⭐️