把命令行变成一场修行 —— 在浏览器里打开一台「假」Linux,从
pwd练到部署 Tomcat,逐关通关,无需安装任何东西。
Linux 练功房是一个跑在浏览器里的 Linux 终端学习游戏。它内置一套完整的 shell 解释器、虚拟文件系统和 vi 编辑器,用 28 个由浅入深的关卡带你手把手练会命令行、vi、Tomcat 部署与 FineReport 集成。每关给出教程、可操作的终端和实时通关检查清单——做对了盖「PASSED」章,做错了随时看提示与参考答案。
👉 点此在线开练(进度自动存浏览器,关网页也不丢)
做题页 —— 左读教程、右敲命令,下方检查清单实时告诉你还差哪一步。
选关页 —— 四大章节、28 关一目了然,通关的关卡烙上印章。
练功场 —— 没有目标、没有检查,纯自由探索,右侧常驻命令速查表。
- 读题:左侧是当关教程,讲清「这一关要练什么、为什么」。
- 敲命令:在右侧终端像真 Linux 一样输入命令,支持管道、重定向、命令链,甚至
vi编辑文件。 - 看清单:每执行一步,右下的「检查清单」会逐项打勾;全绿即通关,自动解锁下一关。
- 卡住了:切到「提示」看思路,或在「参考答案」里偷看一眼(建议先自己试)。
真·终端引擎
- 自研 shell 解释器:管道
|、重定向>>>、命令链&&;一应俱全 - 完整虚拟文件系统:目录树、权限位、属主属组,
ls -la/chmod/chown都按规矩来 - 内置 vi/vim:普通 / 插入 / 命令三种模式,
hjkl移动、ddyyp、/搜索、:wq都能用 - Tomcat 模拟:
tar解压、startup.sh/shutdown.sh、catalina.out日志、8080 端口监听
为学习而设计
- 28 关四章节,难度爬坡平滑,每关都有教程 + 提示 + 参考答案三件套
- 通关检查清单把「过关条件」拆成可勾选项,反馈即时、目标清晰
- 进度持久化到本地存储,随时回来接着练
- 练功场自由模式,配命令速查表,学完即练、练完即查
工程上的讲究
- 核心逻辑(shell / fs / vi / checker)100% 单元测试覆盖,关卡靠规则驱动、易扩展
- 状态用 Pinia 管理,关卡用数据描述而非硬编码
- 视觉走 Gruvbox 暗色 + 轻微 CRT 扫描线,复古但不刺眼
| 章节 | 关卡 | 你会练到 |
|---|---|---|
| 第一章 · 命令行基础 | 1 – 14 | pwd ls cd、文件增删改复制、grep / find、权限管理、进程与端口、软链接、环境变量 |
| 第二章 · vi 编辑器 | 15 – 19 | 打开退出、插入文本、删行复制粘贴、搜索与行号、综合改配置 |
| 第三章 · Tomcat 部署 | 20 – 24 | 配置 JAVA_HOME、tar 解压、启动停止服务、vi 改端口、日志排障 |
| 第四章 · FineReport 集成 | 25 – 28 | 部署 FineReport、配置启动验证、模拟考核、全流程综合 |
界面是一套 Gruvbox 暗色 主题:暖橙做强调、草绿表通过、米白做正文,配 JetBrains Mono 等宽字体还原终端质感。全屏叠了一层极淡的 CRT 扫描线 + 暗角,致敬老式显示器,但刻意压低了强度,长时间看不累。
布局上把做题页的三大区块做成悬浮卡片:面板之间、页面四周留出 20px 以上的空隙,配 14px 圆角与柔和投影,让原本密集的「左教程 / 右终端 / 下清单」有了呼吸感。所有间距收敛到 4px 基线的设计 token(--ld-sp-* / --ld-radius-*),方便统一调优。
npm install # 安装依赖
npm run dev # 启动开发服务器(默认 http://localhost:5173)
npm run build # 类型检查 + 构建生产版本
npm run preview # 本地预览生产构建
npm test # 跑单元测试(320 个)部署为静态站点,
vite.config.ts中base: "/linux-dojo/",对应 GitHub Pages 的子路径。
src/
├─ components/ 终端、vi 叠层、题目板、检查清单、进度条等 UI 组件
├─ core/ shell 解释器 · 虚拟文件系统 · vi 引擎 · 通关 checker
├─ levels/ 28 关的初始文件树与校验规则(数据驱动)
├─ pages/ 做题页 / 选关页 / 练功场
├─ stores/ Pinia 全局状态,含通关进度持久化
├─ configs/ 路由配置
└─ style.css 设计 token 与全局样式(Gruvbox + 呼吸感布局)
core/ 与 levels/ 是纯逻辑层,不依赖 Vue,因此可以单独用 Vitest 充分测试;UI 只负责把这套引擎「演」给你看。
Vue 3 · TypeScript · Vite · Pinia(+ persistedstate 持久化)· Vue Router · markdown-it(教程渲染)· Vitest。
发现 bug、想要新关卡、或对界面有想法?欢迎开 Issue。新增关卡只需在 src/levels/main/ 下按现有结构补一份初始状态 + 检查规则即可。