263 lines
5.6 KiB
Markdown
263 lines
5.6 KiB
Markdown
|
# 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来刻!如果这个项目对您有帮助,请给我们一个 ⭐️
|