4. 前端项目初始化

npm create vite@latest ai-chat-frontend -- --template vue-ts

ai-chat/
├── ai-chat-backend/      # 后端（前面创建）
└── ai-chat-frontend/     # 前端（本次创建）
    ├── public/
    ├── src/
    ├── index.html
    ├── package.json
    ├── vite.config.ts
    ├── tsconfig.json
    ├── tsconfig.app.json
    └── tsconfig.node.json

cd ai-chat-frontend

# 删除示例组件
rm -rf src/components/HelloWorld.vue

# 删除示例资源图片
rm -rf src/assets/hero.png
rm -rf src/assets/vite.svg
rm -rf src/assets/vue.svg

<template>
  <div>
    <h1>AI Chat</h1>
  </div>
</template>

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

npm install tailwindcss @tailwindcss/vite daisyui

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

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
})

@import "tailwindcss";
@plugin "daisyui";

# HTTP 请求库
npm install axios

# 路由
npm install vue-router

# 状态管理
npm install pinia

mkdir -p src/{api,views,stores,composables,router}

src/
├── api/            # 后端 API 请求模块
├── composables/    # 可复用的组合式函数
├── router/         # 路由配置
├── stores/         # Pinia 状态管理
├── views/          # 页面组件
├── App.vue
├── main.ts
└── style.css

import axios from 'axios'

// 后端统一响应格式
interface ApiResponse<T = any> {
  code: number
  message: string
  data: T
}

const api = axios.create({
  baseURL: '/api',
  timeout: 30000,
})

// 请求拦截器：自动携带 JWT Token（后续实现登录后生效）
api.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

// 响应拦截器：自动拆包 ApiResponse
api.interceptors.response.use(
  (response) => {
    const apiResponse = response.data as ApiResponse
    if (apiResponse.code === 200) {
      // 成功：将 response.data 替换为实际数据，调用方直接拿到业务数据
      response.data = apiResponse.data
      return response
    }
    // 业务错误（code !== 200 但 HTTP 状态码为 200）
    return Promise.reject(new Error(apiResponse.message))
  },
  (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token')
      window.location.href = '/login'
    }
    // 尝试从 ApiResponse 中提取错误信息
    const message = error.response?.data?.message || error.message
    return Promise.reject(new Error(message))
  }
)

export default api

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import LoginView from '../views/LoginView.vue'
import ChatView from '../views/ChatView.vue'

const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'Login',
    component: LoginView,
  },
  {
    path: '/',
    name: 'Chat',
    component: ChatView,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import pinia from './stores'

const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

<script setup lang="ts">
  import { RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

<template>
  <div class="min-h-screen flex items-center justify-center">
    <div class="card bg-base-200 w-96 shadow-xl">
      <div class="card-body items-center text-center">
        <h2 class="card-title">AI Chat</h2>
        <p>登录页面（待实现）</p>
      </div>
    </div>
  </div>
</template>

<template>
  <div class="min-h-screen flex items-center justify-center">
    <h1 class="text-2xl">聊天页面（待实现）</h1>
  </div>
</template>

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

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
  ],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
})

npm run dev

fetch('/api/ping').then(r => r.json()).then(console.log)
// 应输出：{code: 200, message: "操作成功", data: "pong"}