limo-platform/client

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

开发指南

安装依赖

npm install

开发命令

# 微信小程序开发
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

构建命令

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

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

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

# 构建H5
npm run build:h5

测试命令

# 运行测试
npm test

主要特性

🚀 快速开发

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

💎 现代化技术栈

• Vue3 Composition API
• TypeScript 类型支持
• Sass 样式预处理器
• ESLint 代码规范

🛠️ 工具完善

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

📱 多端兼容

• 微信小程序
• 支付宝小程序
• 抖音小程序
• H5
• 百度小程序
• QQ小程序
• 京东小程序

核心功能

网络请求服务

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'
})

工具函数

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

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

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

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

通用组件

<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 文件了解详情。

联系我们

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

---

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