online-order-h5/QUICK_START.md

🚀 快速启动指南

📋 前置准备

1. Node.js 环境: >= 18.0.0
2. 包管理器: npm >= 9.0.0
3. 编辑器: VS Code (推荐)

---

🎯 快速开始

1. 进入项目目录

cd /Users/lidefan/Develop/orderApp/line-order-app

2. 安装依赖 (已完成✅)

npm install

3. 启动开发服务器

npm run dev

访问: http://localhost:3000/

4. 构建生产版本

npm run build

5. 预览生产构建

npm run preview

---

⚙️ 环境配置

开发环境配置

编辑 .env.development:

# API地址 - 替换为你的实际API地址
VITE_API_URL=https://your-dev-api.com

# WebSocket地址 - 替换为你的实际WS地址
VITE_WS_URL=wss://your-dev-ws.com

# LIFF ID - 在LINE Developers Console获取
VITE_LIFF_ID=1234567890-abcdefgh

# 租户ID
VITE_TENANT_ID=1

生产环境配置

编辑 .env.production:

VITE_API_URL=https://your-prod-api.com
VITE_WS_URL=wss://your-prod-ws.com
VITE_LIFF_ID=your-prod-liff-id
VITE_TENANT_ID=1

---

🏗️ 项目结构说明

src/
├── api/              # API接口层
│   ├── request.js   # Axios封装
│   ├── auth.js      # 认证API
│   ├── user.js      # 用户API
│   ├── goods.js     # 商品API
│   ├── order.js     # 订单API
│   └── ...
│
├── assets/          # 静态资源
│   └── styles/      # 全局样式
│
├── components/      # 公共组件
│   ├── common/      # 通用组件
│   └── business/    # 业务组件
│
├── composables/     # 组合式函数
│   └── useLiff.js   # LIFF hooks
│
├── config/          # 配置文件
│   └── index.js     # 全局配置
│
├── locale/          # 国际化
│   ├── zh-Hans.json # 简体中文
│   ├── zh-Hant.json # 繁体中文
│   ├── ja.json      # 日语
│   └── en.json      # 英语
│
├── router/          # 路由
│   ├── index.js     # 路由入口
│   ├── routes.js    # 路由配置
│   └── guards.js    # 路由守卫
│
├── store/           # 状态管理
│   ├── index.js     # Pinia入口
│   └── modules/     # Store模块
│       ├── app.js   # 应用状态
│       ├── user.js  # 用户状态
│       ├── cart.js  # 购物车
│       └── order.js # 订单状态
│
├── utils/           # 工具函数
│   ├── storage.js   # 存储工具
│   ├── format.js    # 格式化工具
│   ├── validate.js  # 验证工具
│   ├── image.js     # 图片工具
│   └── price.js     # 价格工具
│
├── views/           # 页面视图
│   ├── index/       # 首页
│   ├── menu/        # 菜单
│   ├── order/       # 订单
│   ├── mine/        # 我的
│   ├── cart/        # 购物车
│   └── login/       # 登录
│
├── App.vue          # 根组件
└── main.js          # 入口文件

---

💡 开发指南

1. 创建新页面

在 src/views/ 下创建新目录:

<!-- src/views/example/example.vue -->
<template>
  <div class="example-page">
    <van-nav-bar title="示例页面" fixed left-arrow @click-left="$router.back()" />
    <div class="page-content" style="padding-top: 46px">
      <!-- 页面内容 -->
    </div>
  </div>
</template>

<script setup>
// 导入需要的模块
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.example-page {
  min-height: 100vh;
  background: #f5f5f5;
}
</style>

2. 添加路由

在 src/router/routes.js 添加:

{
  path: '/example',
  name: 'Example',
  component: () => import('@/views/example/example.vue'),
  meta: {
    title: 'example.title',
    requiresAuth: false
  }
}

3. 创建API接口

在 src/api/ 下创建新文件:

// src/api/example.js
import request from './request'

export function getExampleList(params) {
  return request({
    url: '/api/example/list',
    method: 'get',
    params
  })
}

4. 使用Vant组件

Vant组件已配置自动导入,直接使用即可:

<template>
  <van-button type="primary">按钮</van-button>
  <van-cell title="单元格" />
  <van-image src="https://example.com/image.jpg" />
</template>

5. 使用国际化

<template>
  <div>{{ $t('menu.title') }}</div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
console.log(t('menu.title'))
</script>

6. 使用Pinia Store

<script setup>
import { useUserStore, useCartStore } from '@/store'

const userStore = useUserStore()
const cartStore = useCartStore()

// 使用状态
console.log(userStore.isLogin)
console.log(cartStore.cartCount)

// 调用方法
userStore.setToken('xxx')
cartStore.addToCart({ id: 1, name: '商品' })
</script>

7. 使用LIFF功能

<script setup>
import { useLiff } from '@/composables/useLiff'

const { isReady, isLoggedIn, profile, login, scanCode } = useLiff()

// LIFF已在App.vue中初始化

// 登录
const handleLogin = () => {
  if (!isLoggedIn.value) {
    login()
  }
}

// 扫码
const handleScan = async () => {
  try {
    const result = await scanCode()
    console.log('扫码结果:', result)
  } catch (error) {
    console.error('扫码失败:', error)
  }
}
</script>

---

🔧 常用命令

# 安装依赖
npm install

# 开发模式 (热更新)
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 查看依赖包大小
npm run build -- --report

---

📚 技术文档

官方文档

• Vue 3
• Vite
• Pinia
• Vue Router
• Vant 4
• LINE LIFF
• Axios
• dayjs

项目文档

• 重构方案 - 完整重构计划
• 进度报告 - 当前进度
• README - 项目说明

---

🐛 常见问题

1. 依赖安装失败

# 清除缓存重新安装
rm -rf node_modules package-lock.json
npm install

2. 端口被占用

修改 vite.config.js:

server: {
  port: 3001, // 修改端口
}

3. LIFF初始化失败

检查:

• LIFF ID是否正确
• 是否在LINE环境中打开
• 网络连接是否正常

4. API请求失败

检查:

• .env.development中的API地址
• 网络连接
• 后端服务是否启动
• Token是否有效

---

📞 技术支持

如遇问题:

1. 查看 REFACTOR_PLAN.md
2. 查看 PROGRESS.md
3. 查阅官方文档
4. 检查浏览器控制台错误信息

---

🎉 祝开发顺利!