# 🚀 快速启动指南

## 📋 前置准备

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

---

## 🎯 快速开始

### 1. 进入项目目录

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

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

```bash
npm install
```

### 3. 启动开发服务器

```bash
npm run dev
```

访问: http://localhost:3000/

### 4. 构建生产版本

```bash
npm run build
```

### 5. 预览生产构建

```bash
npm run preview
```

---

## ⚙️ 环境配置

### 开发环境配置

编辑 `.env.development`:

```env
# 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`:

```env
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/` 下创建新目录:

```vue
<!-- 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` 添加:

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

### 3. 创建API接口

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

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

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

### 4. 使用Vant组件

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

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

### 5. 使用国际化

```vue
<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

```vue
<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功能

```vue
<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>
```

---

## 🔧 常用命令

```bash
# 安装依赖
npm install

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

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

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

---

## 📚 技术文档

### 官方文档

- [Vue 3](https://cn.vuejs.org/)
- [Vite](https://cn.vitejs.dev/)
- [Pinia](https://pinia.vuejs.org/zh/)
- [Vue Router](https://router.vuejs.org/zh/)
- [Vant 4](https://vant-ui.github.io/vant/)
- [LINE LIFF](https://developers.line.biz/en/docs/liff/)
- [Axios](https://axios-http.com/)
- [dayjs](https://day.js.org/)

### 项目文档

- [重构方案](./REFACTOR_PLAN.md) - 完整重构计划
- [进度报告](./PROGRESS.md) - 当前进度
- [README](./README.md) - 项目说明

---

## 🐛 常见问题

### 1. 依赖安装失败

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

### 2. 端口被占用

修改 `vite.config.js`:

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

### 3. LIFF初始化失败

检查:
- LIFF ID是否正确
- 是否在LINE环境中打开
- 网络连接是否正常

### 4. API请求失败

检查:
- `.env.development`中的API地址
- 网络连接
- 后端服务是否启动
- Token是否有效

---

## 📞 技术支持

如遇问题:
1. 查看 [REFACTOR_PLAN.md](./REFACTOR_PLAN.md)
2. 查看 [PROGRESS.md](./PROGRESS.md)
3. 查阅官方文档
4. 检查浏览器控制台错误信息

---

**🎉 祝开发顺利!**