healthapp/TODOS/03-Web原型开发/01-项目初始化和模拟数据.md

01-项目初始化和模拟数据

目标

初始化 Vue 3 项目并搭建模拟数据服务，为原型开发提供完整的数据支持。

---

前置要求

• 已完成 Web 前端 Vue 环境搭建
• Node.js 18+

---

实施步骤

步骤 1：创建 Vue 3 项目

# 进入项目目录
cd I:/apps/demo/healthApps

# 创建 Vue 3 项目
npm create vite@latest web -- --template vue-ts

# 进入项目
cd web

# 安装依赖
npm install

步骤 2：安装核心依赖

# 路由
npm install vue-router@4

# 状态管理
npm install pinia

# UI 组件库
npm install element-plus @element-plus/icons-vue

# HTTP 请求
npm install axios

# 图表
npm install echarts vue-echarts

# 工具
npm install dayjs lodash-es
npm install -D @types/lodash-es

步骤 3：创建项目目录结构

web/
├── src/
│   ├── api/                    # API 接口（后续对接用）
│   ├── assets/                 # 静态资源
│   ├── components/             # 公共组件
│   │   ├── AppHeader.vue
│   │   ├── AppFooter.vue
│   │   └── Loading.vue
│   ├── mock/                   # 模拟数据 ⭐
│   │   ├── index.ts            # 统一导出
│   │   ├── user.ts             # 用户数据
│   │   ├── constitution.ts     # 体质问卷和结果
│   │   ├── chat.ts             # AI 对话数据
│   │   └── products.ts         # 产品数据
│   ├── router/                 # 路由配置
│   │   └── index.ts
│   ├── stores/                 # Pinia 状态
│   │   ├── auth.ts
│   │   ├── constitution.ts
│   │   └── chat.ts
│   ├── styles/                 # 全局样式
│   │   └── index.scss
│   ├── types/                  # TypeScript 类型
│   │   └── index.ts
│   ├── utils/                  # 工具函数
│   │   └── index.ts
│   ├── views/                  # 页面
│   │   ├── auth/               # 登录相关
│   │   ├── home/               # 首页
│   │   ├── constitution/       # 体质辨识
│   │   ├── chat/               # AI 对话
│   │   └── profile/            # 个人中心
│   ├── App.vue
│   └── main.ts
├── index.html
├── vite.config.ts
└── package.json

步骤 4：创建类型定义

创建 src/types/index.ts（与 APP 端共用类型定义）：

// 用户类型
export interface User {
  id: number
  phone: string
  nickname: string
  avatar: string
  surveyCompleted: boolean
}

// 体质类型
export type ConstitutionType = 
  | 'pinghe' | 'qixu' | 'yangxu' | 'yinxu' | 'tanshi'
  | 'shire' | 'xueyu' | 'qiyu' | 'tebing'

// 体质问卷题目
export interface ConstitutionQuestion {
  id: number
  constitutionType: ConstitutionType
  question: string
  options: { value: number; label: string }[]
}

// 体质评估结果
export interface ConstitutionResult {
  primaryType: ConstitutionType
  scores: Record<ConstitutionType, number>
  description: string
  suggestions: string[]
  assessedAt: string
}

// 对话消息
export interface Message {
  id: string
  role: 'user' | 'assistant'
  content: string
  createdAt: string
}

// 对话
export interface Conversation {
  id: string
  title: string
  messages: Message[]
  createdAt: string
  updatedAt: string
}

// 产品
export interface Product {
  id: number
  name: string
  category: string
  description: string
  efficacy: string
  price: number
  imageUrl: string
  mallUrl: string
}

步骤 5：创建模拟数据

模拟数据与 APP 端共用同一套逻辑，复制以下文件：

• src/mock/user.ts
• src/mock/constitution.ts
• src/mock/chat.ts
• src/mock/products.ts
• src/mock/index.ts

详细代码参见 APP 端文档 02-APP原型开发/01-项目初始化和模拟数据.md

步骤 6：配置 Element Plus

更新 src/main.ts：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'

import App from './App.vue'
import router from './router'
import './styles/index.scss'

const app = createApp(App)

// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(createPinia())
app.use(router)
app.use(ElementPlus, { locale: zhCn })

app.mount('#app')

步骤 7：创建全局样式

创建 src/styles/index.scss：

// 主题色
$primary-color: #10B981;
$primary-light: #ECFDF5;
$danger-color: #EF4444;
$warning-color: #F59E0B;
$text-primary: #1F2937;
$text-secondary: #6B7280;
$text-hint: #9CA3AF;
$bg-color: #F3F4F6;
$border-color: #E5E7EB;

// 全局样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: $text-primary;
  background-color: $bg-color;
}

// Element Plus 主题覆盖
:root {
  --el-color-primary: #{$primary-color};
  --el-color-success: #{$primary-color};
}

// 通用类
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

---

验收标准

• Vue 3 项目创建成功
• 所有依赖安装完成
• 目录结构创建完成
• 模拟数据文件创建完成
• Element Plus 配置正常
• 项目可正常启动

---

预计耗时

30-40 分钟

---

下一步

完成后进入 03-Web原型开发/02-路由和布局设计.md