优雅草正版授权系统前端实现与技术栈

三、技术栈 / Tech Stack

四、环境要求 / Environment Requirements

• Node.js >= 16.x
• npm 或 pnpm / npm or pnpm

五、快速开始 / Quick Start

1. 克隆项目 / Clone the Project

git clone https://gitee.com/youyacao/zhengban-front.git
cd zhengban-front

2. 安装依赖 / Install Dependencies

npm install # or pnpm install

3. 配置开发环境 / Configure Development Environment

编辑 vite.config.ts 文件，修改代理配置：

server: { host: 'localhost', port: 8080, proxy: { '/api': { target: 'http://your-backend-domain.com', changeOrigin: true } } }

4. 启动开发服务器 / Start Development Server

npm run dev

访问 http://localhost:8080 查看项目。

5. 构建生产版本 / Build for Production

npm run build

构建完成后，文件将输出到 ../server/public/pc 目录（根据 vite.config.ts 配置）。

六、项目结构 / Project Structure

verify-front/
├── src/
│   ├── api/ # API 接口
│   │   ├── announcement.ts
│   │   ├── config.ts
│   │   ├── order.ts
│   │   ├── product.ts
│   │   └── query.ts
│   ├── components/ # 公共组件
│   │   ├── AppFooter.vue
│   │   ├── AppHeader.vue
│   │   ├── AuthorizationCard.vue
│   │   ├── AuthorizationCertificate.vue
│   │   └── ProductCard.vue
│   ├── layouts/ # 布局组件
│   │   └── DefaultLayout.vue
│   ├── router/ # 路由配置
│   │   └── index.ts
│   ├── styles/ # 样式文件
│   │   └── main.css
│   ├── types/ # TypeScript 类型定义
│   │   └── html2canvas.d.ts
│   ├── utils/ # 工具函数
│   │   └── request.ts
│   ├── views/ # 页面组件
│   │   ├── announcement/
│   │   ├── home/
│   │   ├── order/
│   │   ├── policy/
│   │   ├── product/
│   │   └── query/
│   ├── App.vue
│   └── main.ts
├── index.html
├── package.json
├── vite.config.ts
├── tailwind.config.js
├── postcss.config.js
└── tsconfig.json

七、主要功能 / Main Features

八、开发说明 / Development Guide

API 请求 / API Requests

所有 API 请求都通过 src/utils/request.ts 封装的 axios 实例进行，统一处理请求拦截、响应拦截和错误处理。

import request from '@/utils/request'
export const getProductList = () => {
  return request.get('/api/product/list')
}

路由配置 / Router Configuration

路由配置在 src/router/index.ts 中，使用 Vue Router 4 的 API。

状态管理 / State Management

使用 Pinia 进行状态管理，store 文件可以根据需要在 src/stores 目录下创建。

样式开发 / Styling

项目使用 Tailwind CSS，可以直接在组件中使用原子化类名。

<template>
  <div>
    <!-- 内容 -->
  </div>
</template>

九、部署说明 / Deployment

方式一：构建到后端项目 / Method 1: Build into Backend Project

默认配置会将构建文件输出到 ../server/public/pc 目录，适合前后端在同一服务器部署。

npm run build

方式二：独立部署 / Method 2: Standalone Deployment

1. 修改 vite.config.ts 中的 base 和 outDir 配置：

export default defineConfig({ base: '/', build: { outDir: 'dist', emptyOutDir: true } })

2. 构建项目：

npm run build

3. 将 dist 目录上传到服务器或 CDN。

4. 配置 Nginx：

server {
  listen 80;
  server_name yourdomain.com;
  root /path/to/dist;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
  location /api {
    proxy_pass http://your-backend-domain.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

十、常见问题 / FAQ

十一、相关链接 / Links

十二、开源协议 / License

本项目遵循相应的开源协议。