save
This commit is contained in:
parent
18fd3ede2c
commit
dc24d5b6ed
117 changed files with 36876 additions and 7 deletions
263
client/README.md
Normal file
263
client/README.md
Normal file
|
@ -0,0 +1,263 @@
|
|||
# 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来刻!如果这个项目对您有帮助,请给我们一个 ⭐️
|
Loading…
Add table
Add a link
Reference in a new issue