init: 移动游戏项目独立化(便携式 App.vue + 独立 i18n,可嵌入 mainPage)
This commit is contained in:
77
README.md
Normal file
77
README.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# z449 - 移动游戏项目展示页
|
||||
|
||||
跨学期 Unity 移动游戏毕设(448/449)的展示页:项目概览、团队、玩家排行榜、版本迭代记录、ML-Agents 实验。
|
||||
|
||||
纯前端 Vue 3 应用,独立可渲染与维护,亦可作为 [mainPage](https://git.zikai.wang/zikai/zMainPage) 的子模块(git submodule)构建期集成展示。
|
||||
|
||||
## 功能
|
||||
|
||||
- Hero 区:项目元数据(技术栈 / 时间 / 课程)
|
||||
- 概览 + 截图轮播(自动播放)
|
||||
- 团队成员卡片
|
||||
- 玩家分数排行榜(复用 449 现有 PHP 接口 `/449/449rest.php`)
|
||||
- 版本演进时间线(2D -> 3D 形态转变,多线并行)
|
||||
- ML-Agents 强化学习演示视频
|
||||
- 中英双语(中文默认,英文懒加载)
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
z449/
|
||||
├── index.html Vite 入口
|
||||
├── package.json
|
||||
├── vite.config.js 含 /448 /449 开发代理
|
||||
├── .npmrc npmmirror 镜像加速
|
||||
├── src/
|
||||
│ ├── main.js 独立 app 挂载(i18n + 全局样式)
|
||||
│ ├── App.vue ★ 便携式根组件:接 :locale prop,嵌入与独立两用
|
||||
│ ├── config.js 静态配置(资源路径 / 排行榜接口 / 子标签)
|
||||
│ ├── i18n/ 独立 vue-i18n 实例 + 中英 locale(mobileGame.* 文案单一来源)
|
||||
│ ├── components/ Hero / 轮播 / 子标签 / 排行榜 / 时间线 / 实验
|
||||
│ │ └── ui/ PageShell / Tag(自洽 UI 基元)
|
||||
│ ├── data/ 团队成员 / 版本演进数据
|
||||
│ └── styles/ variables.css(令牌)+ base.css(重置,仅独立 app 加载)
|
||||
└── docs/ 设计文档
|
||||
```
|
||||
|
||||
## 嵌入 mainPage(i18n 桥接)
|
||||
|
||||
`App.vue` 是便携式组件:
|
||||
|
||||
- **嵌入时**:mainPage 侧包装器 `import` 本项目 `src/App.vue`,把父项目当前语言经 `:locale` prop 传入。`App.vue` 内 `watch` 该 prop,同步到本项目独立的 `vue-i18n` 实例 `locale`,从而跟随父项目语言开关响应式切换。文案来自本项目自有 locale 文件,不共享父项目的 messages。
|
||||
- **独立运行时**:不接收 prop,默认中文;可自管语言切换。
|
||||
|
||||
样式隔离:子组件均为 scoped;全局重置(`variables.css` / `base.css`)仅在独立 app 的 `main.js` 加载,嵌入时不加载,复用宿主 `:root` 令牌级联。
|
||||
|
||||
## Ubuntu 从零安装
|
||||
|
||||
```bash
|
||||
# 1. 安装 Node.js 18+
|
||||
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
|
||||
sudo apt-get install -y nodejs
|
||||
|
||||
# 2. 克隆并安装
|
||||
git clone https://git.zikai.wang/zikai/z449.git
|
||||
cd z449
|
||||
npm install # 已配 npmmirror 镜像加速
|
||||
|
||||
# 3. 构建生产版本
|
||||
npm run build # 产物输出到 dist/
|
||||
```
|
||||
|
||||
开发模式:
|
||||
|
||||
```bash
|
||||
npm run dev # http://localhost:5174
|
||||
```
|
||||
|
||||
> 排行榜与游戏资源依赖站点根的 `/448` `/449` 静态资源与 `/449/449rest.php` 接口。开发时 `vite.config.js` 已配代理到 `localhost:8080`;生产由 Apache 静态 / PHP 服务提供。
|
||||
|
||||
## 技术栈
|
||||
|
||||
| 项 | 选择 |
|
||||
|----|------|
|
||||
| 框架 | Vue 3.4(SFC,`<script setup>`) |
|
||||
| 构建 | Vite 5 |
|
||||
| 国际化 | vue-i18n 9(中文同步,英文懒加载) |
|
||||
| 包源 | npmmirror.com(中国镜像加速) |
|
||||
Reference in New Issue
Block a user