Amoxtli Vue

Source: Dev.to

概述

Amoxtli Vue 是一个多媒体、交互式的 Vue.js 学习平台，既适用于自学，也适用于指导式现场工作坊。它通过集成一个练习场，让学习者可以实验课程代码、使用内置的版本控制跟踪更改，并在现场课程中与讲师同步，从而降低学习摩擦。

演示

• Live demo:

代码仓库

• Main project:
• Playground (yeyehcoa‑vue):

灵感

Amoxtli Vue 是 notes‑on‑Vue 网站的精神继承者：。虽然已有许多优秀的 Vue 课程和讲师，但动手实践部分往往要求学习者自行搭建环境并独立管理笔记，导致不必要的摩擦。

功能

• Integrated Playground – yeyehcoa-vue 练习场让单独学习者能够实验课程代码并保留受版本控制的历史。
• Live Workshop Sync – 在现场工作坊期间，同一练习场实时镜像讲师的代码，参与者可以同步跟进并将作品本地保存。
• Modified TutorialKit – 使用定制的 TutorialKit 实例，嵌入专门为 Vue.js 设计的 REPL 组件。
• Authentication & Protection – Netlify Functions 在登录后保护静态内容。
• Server‑Sent Events & Dexie – 实现服务器事件和客户端 IndexedDB（Dexie），提供离线功能和数据持久化。

技术细节

• Frontend：使用 Vue.js 并配合自定义 REPL 组件。
• Backend：使用 Netlify Functions 进行身份验证和内容保护。
• Data Storage：采用 Dexie（IndexedDB）实现客户端存储和版本控制。
• Real‑time Sync：Server‑Sent Events（SSE）在工作坊期间实现讲师代码的实时镜像。

未来考虑

虽然项目目前专注于学习平台，但我们有兴趣探索 Mux 的自动配音和自动字幕功能，以提升视频内容的可访问性。