limo-platform/client/README.md

263 lines
5.6 KiB
Markdown
Raw Normal View History

2025-07-11 15:41:48 +08:00
# 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来刻如果这个项目对您有帮助请给我们一个 ⭐️