healthapp

7.7 KiB

Raw Permalink Blame History

01-Web 前端项目结构初始化

目标

使用 Vite 创建 Vue 3 + TypeScript 项目，配置基础依赖和目录结构。

前置要求

Node.js 18+ 已安装
npm/pnpm 已配置

实施步骤

步骤 1：创建 Vue 3 项目

cd I:\apps\demo\healthApps

# 使用 Vite 创建项目
npm create vite@latest web -- --template vue-ts

cd web

步骤 2：安装依赖

# 基础依赖
npm install

# 路由
npm install vue-router@4

# 状态管理
npm install pinia

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

# HTTP 请求
npm install axios

# 图表（体质雷达图）
npm install echarts vue-echarts

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

步骤 3：创建目录结构

cd src

# 创建目录
mkdir -p api
mkdir -p components/common
mkdir -p components/survey
mkdir -p components/constitution
mkdir -p components/chat
mkdir -p views/auth
mkdir -p views/survey
mkdir -p views/constitution
mkdir -p views/chat
mkdir -p views/profile
mkdir -p stores
mkdir -p router
mkdir -p utils
mkdir -p types
mkdir -p assets/styles

步骤 4：配置 Element Plus

更新 src/main.ts：

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

import App from './App.vue'
import router from './router'

import './assets/styles/global.css'

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')

步骤 5：创建全局样式

创建 src/assets/styles/global.css：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ccc;
}

/* 通用类 */
.page-container {
  min-height: 100%;
  padding: 20px;
  background-color: #f5f7fa;
}

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

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

步骤 6：创建类型定义

创建 src/types/index.ts：

// 用户相关
export interface User {
  id: number
  phone: string
  email: string
  nickname: string
  avatar: string
  survey_completed: boolean
}

// 健康档案
export interface HealthProfile {
  id: number
  name: string
  birth_date: string
  gender: string
  height: number
  weight: number
  bmi: number
  blood_type: string
  occupation: string
  marital_status: string
  region: string
}

// 生活习惯
export interface LifestyleInfo {
  sleep_time: string
  wake_time: string
  sleep_quality: string
  meal_regularity: string
  diet_preference: string
  daily_water_ml: number
  exercise_frequency: string
  exercise_type: string
  exercise_duration_min: number
  is_smoker: boolean
  alcohol_frequency: string
}

// 体质问题
export interface Question {
  id: number
  constitution_type: string
  question_text: string
  options: string[]
  order_num: number
}

// 体质得分
export interface ConstitutionScore {
  type: string
  name: string
  score: number
  description: string
}

// 体质结果
export interface ConstitutionResult {
  primary_constitution: ConstitutionScore
  secondary_constitutions: ConstitutionScore[]
  all_scores: ConstitutionScore[]
  recommendations: Record<string, Record<string, string>>
  assessed_at: string
}

// 对话
export interface Conversation {
  id: number
  title: string
  created_at: string
  updated_at: string
}

// 消息
export interface Message {
  id: number
  role: 'user' | 'assistant' | 'system'
  content: string
  created_at: string
}

// API 响应
export interface ApiResponse<T = any> {
  code: number
  message: string
  data: T
}

步骤 7：创建 API 基础配置

创建 src/api/request.ts：

import axios from 'axios'
import type { ApiResponse } from '@/types'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'

const request = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api',
  timeout: 30000,
})

// 请求拦截器
request.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = `Bearer ${userStore.token}`
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  (response) => {
    const res = response.data as ApiResponse
    if (res.code !== 0) {
      ElMessage.error(res.message || '请求失败')
      return Promise.reject(new Error(res.message))
    }
    return res.data
  },
  (error) => {
    if (error.response?.status === 401) {
      const userStore = useUserStore()
      userStore.logout()
      window.location.href = '/login'
    }
    ElMessage.error(error.message || '网络错误')
    return Promise.reject(error)
  }
)

export default request

步骤 8：创建环境变量文件

创建 web/.env.development：

VITE_API_BASE_URL=http://localhost:8080/api

创建 web/.env.production：

VITE_API_BASE_URL=/api

步骤 9：配置 Vite

更新 web/vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

步骤 10：验证项目

npm run dev
# 访问 http://localhost:3000

需要创建的文件清单

文件路径	说明
`src/main.ts`	应用入口（更新）
`src/assets/styles/global.css`	全局样式
`src/types/index.ts`	类型定义
`src/api/request.ts`	请求封装
`.env.development`	开发环境变量
`.env.production`	生产环境变量
`vite.config.ts`	Vite 配置（更新）

最终目录结构

web/
├── src/
│   ├── api/
│   │   └── request.ts
│   ├── assets/
│   │   └── styles/
│   │       └── global.css
│   ├── components/
│   │   ├── common/
│   │   ├── survey/
│   │   ├── constitution/
│   │   └── chat/
│   ├── views/
│   │   ├── auth/
│   │   ├── survey/
│   │   ├── constitution/
│   │   ├── chat/
│   │   └── profile/
│   ├── stores/
│   ├── router/
│   ├── utils/
│   ├── types/
│   │   └── index.ts
│   ├── App.vue
│   └── main.ts
├── .env.development
├── .env.production
├── vite.config.ts
└── package.json

验收标准

项目创建成功
所有依赖安装完成
目录结构创建完整
npm run dev 正常启动
访问 http://localhost:3000 看到页面

预计耗时

15-20 分钟

下一步

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

7.7 KiB Raw Permalink Blame History