shop-wx/CLAUDE.md

4.2 KiB

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

WeChat Mini Program built with Uni-App + Vue 3 for smart cabinet management + e-commerce. Supports WeChat, H5, and App platforms.

Requirements: Node.js >= 22, pnpm >= 9

Common Commands

Development

pnpm dev:mp-weixin  # WeChat Mini Program (primary)
pnpm dev:h5         # H5
pnpm dev:app        # App
pnpm dev:mp:test    # Test environment

Building

pnpm build:mp-weixin  # Build for WeChat
pnpm build:h5         # Build for H5
pnpm build:app        # Build for App

Code Quality

pnpm type-check  # TypeScript check
pnpm lint        # ESLint
pnpm lint:fix    # Fix ESLint issues

Project Structure

src/
├── api/              # Business APIs (ab98/, cabinet/, shop/, users/, etc.)
├── components/       # Reusable components
├── config/           # App configuration
├── hooks/            # Custom Vue hooks (useRequest.ts, useUpload.ts)
├── http/             # HTTP client (http.ts, interceptor.ts)
├── layouts/          # Layout components
├── pages/            # Feature-based pages (index/, login/, me/, etc.)
├── pages-sub/        # Mini-program sub-packages
├── pinia/            # State management (stores/wx.ts, ab98-user.ts)
├── router/           # Routing config
├── static/           # Static assets
├── style/            # Global styles
├── tabbar/           # Native tabbar (2 tabs)
├── types/            # TypeScript definitions
└── utils/            # Utility functions

Architecture

Layered: API → HTTP → State (Pinia) → Components → Pages

HTTP: Alova wrapper around uni.request with interceptors (see src/http/)

State: Pinia stores with persisted state (src/pinia/)

Routing: Uni-app built-in routing + interceptors (src/router/)

Authentication: Dual mode (WeChat + Enterprise WeChat), auto token refresh

Key Config Files

  • vite.config.ts: Uni plugins, platform builds, H5 proxy
  • tsconfig.json: Path aliases @/*src/*
  • uno.config.ts: UnoCSS preset + Carbon icons
  • manifest.json: App config (name, appid, platform settings)

Environment Variables

Located in /env:

  • .env, .env.development, .env.production, .env.test

Key vars:

  • VITE_SERVER_BASEURL: API base URL
  • VITE_WX_APPID: WeChat AppID
  • VITE_APP_PROXY_ENABLE: H5 proxy toggle
  • VITE_AUTH_MODE: Auth mode (single/dual token)

Development Guidelines

Full Standards: See /doc/代码编写规范.md

Key Points:

  • Vue 3: <script lang="ts" setup>, withDefaults(defineProps<Props>(), {...})
  • TypeScript: Full coverage, use interfaces for types
  • Naming: camelCase (vars/functions), kebab-case (files), PascalCase (interfaces)
  • Pinia: Setup syntax, use defineStore('name', () => {...})
  • API: http.get<T>('/api/path', params), http.post<T>('/api/path', data)
  • Styling: scoped styles, BEM convention, rpx units

HTTP Client

Location: src/http/http.ts (Alova wrapper around uni.request)

Usage:

http.get<T>('/api/users', params)
http.post<T>('/api/users', data)

Auth: Token injection via interceptors, auto-refresh on 401

Build System

Multi-Platform:

  • H5: Dev server (pnpm dev:h5)
  • Mini-Program: Build to dist/dev/mp-weixin, open in WeChat Dev Tools
  • App: Native app build

Optimization: Tree-shaking, code-splitting, minification (esbuild), bundle analysis (H5)

Important Directories

  • /doc: Coding standards, cleanup plan, migration guide
  • /env: Environment config (.env, .env.development, .env.production, .env.test)
  • /src/api: Business APIs by module (cabinet/, shop/, users/, etc.)

Troubleshooting

Build fails: Check Node >= 22, run pnpm install, clear cache Mini-program issues: Use WeChat Developer Tools H5 proxy: Set VITE_APP_PROXY_ENABLE="true" in .env Type errors: Run pnpm type-check, check path aliases in tsconfig.json

Documentation

  • Standards: /doc/代码编写规范.md
  • Cleanup: /doc/项目清理计划.md
  • Migration: /doc/迁移指令.md