GETTING_STARTED.md

快速开始

本文档将帮助你快速搭建开发环境并运行项目。

环境要求

必需

• Node.js: >= 18.0.0
• 包管理器: Yarn (推荐) 或 npm
• 微信开发者工具: 下载地址

推荐

• IDE: VS Code 或 Cursor
• VS Code 插件:
  • ESLint
  • Prettier
  • Tailwind CSS IntelliSense
  • TypeScript Vue Plugin (Volar)

安装步骤

1. 克隆项目

git clone <repository-url>
cd LingGongFang_taro

2. 安装依赖

# 使用 Yarn (推荐)
yarn install

# 或使用 npm
npm install

安装过程中会自动执行 weapp-tw patch 以修补 Tailwind CSS 支持。

3. 配置环境变量

# 复制环境配置文件
cp env.example .env.development
cp env.example .env.production

编辑 .env.development:

# 开发环境配置
NODE_ENV=development
API_BASE_URL=http://localhost:8123
DEBUG_MODE=true
LOG_LEVEL=debug
API_TIMEOUT=30000

编辑 .env.production:

# 生产环境配置
NODE_ENV=production
API_BASE_URL=https://api.example.com
DEBUG_MODE=false
LOG_LEVEL=error
API_TIMEOUT=10000

4. 启动开发服务器

# 微信小程序开发模式
yarn dev

5. 配置微信开发者工具

1. 打开微信开发者工具
2. 导入项目，选择 dist 目录
3. 填写 AppID（或使用测试号）
4. 关闭 ES6 转 ES5 选项（Taro 已处理）
5. 关闭上传代码时样式自动补全
6. 关闭代码压缩上传（生产环境除外）

项目配置

project.config.json

微信小程序项目配置，主要字段:

{
  "miniprogramRoot": "./dist",
  "projectname": "linggongfang_taro",
  "appid": "your-app-id",
  "setting": {
    "urlCheck": false,
    "es6": true
  }
}

tsconfig.json

TypeScript 配置，已配置路径别名:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

使用方式:

import { useUser } from '@/hooks';
import { Button } from '@/components/ui';

开发模式

微信小程序

yarn dev          # 开发模式 (带 watch)
yarn build        # 生产构建
yarn build:dev    # 开发环境构建

H5 (Web)

yarn dev:h5       # H5 开发模式
yarn build:h5     # H5 生产构建

抖音小程序

yarn dev:tt       # 抖音小程序开发模式

常见问题

Q: 启动后白屏

检查以下配置:

1. 确保 dist 目录存在
2. 检查微信开发者工具中 AppID 是否正确
3. 检查控制台是否有报错信息

Q: 样式不生效

1. 确保已安装依赖: yarn install
2. 重启开发服务器: yarn dev
3. 清除微信开发者工具缓存

Q: API 请求失败

1. 检查 .env.development 中的 API_BASE_URL
2. 确保后端服务已启动
3. 检查微信开发者工具中"不校验合法域名"是否开启

Q: TypeScript 类型错误

# 重新生成 API 类型
yarn openapi

下一步

• 阅读 架构说明 了解项目结构
• 阅读 开发指南 了解开发规范
• 查看 Hooks 文档 了解自定义 Hooks