Popiart SkillHub 前端项目

PC 端企业级网站前端，面向桌面端浏览器（1280px 及以上分辨率），便于长期维护与团队协作。

技术栈

类别	选型
框架	React 18（函数组件）
构建	Vite 5
语言	TypeScript 5（strict，禁止 any，优先 interface）
UI	Arco Design
样式	Tailwind CSS v4（@tailwindcss/vite）
路由	React Router 6
状态	Zustand
HTTP	Axios

目录说明

src/
├── api/           # API 层：request 实例、通用类型、按业务拆分的 modules
├── assets/        # 静态资源：fonts、images、styles
├── components/    # 公共组件，按组件名建子目录
├── constants/     # 常量（路由路径、状态码等）
├── hooks/         # 自定义 Hooks
├── layouts/       # 布局组件
├── pages/         # 页面，按路由组织
├── router/        # 路由配置与守卫
├── store/         # Zustand store
├── types/         # 全局类型（业务实体、API 模型等）
├── utils/         # 工具函数
├── App.tsx
├── main.tsx
└── index.css      # 全局样式入口（Tailwind + 自定义）

安装与启动

# 安装依赖
npm install

# 开发环境，端口 5195
npm run dev

# 构建
npm run build          # 默认
npm run build:stage    # 预发
npm run build:prod     # 生产

# 预览构建产物
npm run preview

环境变量

根目录下维护 .env、.env.stage、.env.prod。所有以 VITE_ 开头的变量会在构建时注入前端。

变量	说明
VITE_API_URL	后端 API 地址
VITE_SKILLHUB_URL	SkillHub 跳转地址
VITE_CANVAS_URL	Canvas 跳转地址

开发代理在 vite.config.mts 中维护，默认本地服务端口为 5195。

代码规范

ESLint 9（flat config）+ TypeScript ESLint + React Hooks
Prettier 与 ESLint 集成，保存时自动格式化
提交前由 Husky + lint-staged 执行 lint、format；commit 信息需符合 Conventional Commits（feat、fix、docs、style、refactor、chore 等）

详见 CONTRIBUTING.md。

代理说明

开发环境下 /api_client、/media、/resource 会代理到后端，可在 vite.config.mts 的 server.proxy 中修改。

构建与脚本

路径别名：@ 指向 src
开发端口：5195
生产构建使用 Vite/esbuild 压缩，按需通过 Rollup manual chunks 拆分依赖包

2.5 KiB Raw Permalink Blame History