Data-Science-For-Beginners 测验应用quiz-appVue 2 本地化架构、翻译工作流与 Azure 静态站点部署【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners本文基于 Data-Science-For-Beginners 仓库中quiz-app目录下的 README含爱沙尼亚语等翻译版本系统讲解该课程配套测验应用的本地化机制与运维实践。读完本文你将掌握课程 40 道前/后置测验的 JSON 组织结构与vue-i18n集成方式、新增一种语言翻译的四步标准工作流、Vue CLI 项目的本地开发命令以及如何将应用通过 Azure Static Web Apps 结合 GitHub Actions 工作流实现 CI/CD 部署。测验应用是什么quiz-app是 Data Science for Beginners 课程10 Weeks, 20 Lessons的前置与后置测验应用每节课配有课前Pre和课后Post测验用于检验学习进度。应用本身是一个基于Vue 2 vue-router vue-i18n的单页静态站点位于仓库根目录下的 quiz-app/ 目录其英文 README 见 quiz-app/README.md爱沙尼亚语翻译版见 translations/et/quiz-app/README.md。从 quiz-app/package.json 可以确认其技术栈版本边界依赖版本约束作用vue^2.6.11核心框架Vue 2vue-i18n^8.22.2国际化管理语言切换、消息查找vue-router^3.4.9路由配合 URL 查询参数?locxx定位语言vue/cli-service~4.5.0提供serve/build/lint三个脚本eslinteslint-plugin-vue^6.7.2 / ^6.2.2代码风格检查测验数据的组织结构6 个 group 文件、40 道题README 明确说明整个课程共 40 个测验编号从 0 开始并按章节拆分为若干分组grouping存放。仓库源码验证了这一点权威canonical英文版测验位于 quiz-app/src/assets/translations/en/包含group-1.json至group-6.json共 6 个分组文件每个group-N.json是一个长度为 1 的 JSON 数组唯一元素含四个键title、complete、error、quizzesquizzes数组中每一项结构为{ id, title, quiz }其中id是全局唯一的测验编号quiz是题目列表每题含questionText与answerOptions每个选项含answerText和字符串形式的isCorrect。实际分布与编号可以从源文件中读出分组文件测验数量编号范围覆盖课程示例标题group-1.json80–7第 1–4 课定义数据科学、伦理、定义数据、统计与概率group-2.json88–15第 5–8 课关系型数据库、NoSQL、Python、数据准备group-3.json1016–25第 9–13 课四类数据可视化group-4.json626–31第 14–16 课数据科学生命周期group-5.json632–37第 17–19 课云端数据科学group-6.json238–39第 20 课真实世界应用合计 8810662 40与 README 声明一致。两层 index.js 的装配约定测验数据的加载采用“两层装配”语言层装配quiz-app/src/assets/translations/en/index.js把 6 个 group 文件分别 import 后取其数组第 0 项按0到5的键合并成一个对象导出import en0 from ./group-1.json; // ... en1 ~ en5 同理 const quiz { 0: en0[0], 1: en1[0], // ... 5: en5[0], }; export default quiz;应用层装配quiz-app/src/assets/translations/index.js把各语言的消息对象汇总键为 ISO 语言缩写import englishQuizzes from ./en/; import frenchQuizzes from ./fr/; import spanishQuizzes from ./es/; const messages { en: englishQuizzes, fr: frenchQuizzes, es: spanishQuizzes, }; export default messages;从当前源码看仓库内置了en、fr、es三种语言目录其中es目录含完整的 6 个 group 文件fr目录仅有group-1.json与group-2.json说明法语翻译尚未完成——这恰好印证了 README 中“翻译是逐步按组补齐”的工作模式。i18n 与?loc查询参数的联动应用启动链路可以从 quiz-app/src/main.js 与 quiz-app/src/App.vue 中确认main.js创建VueI18n实例locale与fallbackLocale均初始为enApp.vue中的语言下拉框使用v-modellocale绑定选项en/fr/eslocale变化时通过this.$root.$i18n.locale val切换 vue-i18n 的活动语言关键入口逻辑若路由查询参数存在locthis.$route.query.loc则以该值初始化语言否则回退到en。这就是 README 最后一步要求的原理各语言翻译版课程中的测验链接带上?locfr之类的查询参数页面打开即自动切换到对应语言。新增一套翻译测验的标准工作流quiz-app/README.md给出的“Adding a translated quiz set”流程共四步结合源码约定展开如下第 1 步按 en 约定创建翻译目录结构。在quiz-app/src/assets/translations/下新建语言目录如fr/并创建与英文版对应的group-1.json…group-6.json文件保持同一 JSON 结构title/complete/error/quizzes题目id与英文版本一一对应。编号必须与正确的测验章节对齐——因为课程共 40 个测验且从 0 编号id错误会导致题目与课程错位。第 2 步编写语言目录内的index.js。仿照 quiz-app/src/assets/translations/en/index.js 的写法import 本语言全部 group 文件并合并导出。若某组尚未翻译完成如法语目前只有前两组可先只 import 已完成的部分——从源码结构看App.vue用questions[locale][0]访问语言对象缺组时会出现运行时错误因此未翻译完成的语言在正式启用前需保证0–5六个键齐全。第 3 步注册到应用层index.js。修改 quiz-app/src/assets/translations/index.jsimport 新语言并加入messages映射键名必须与语言目录名一致README 明确要求“匹配本地化缩写与语言目录名”。随后在App.vue的下拉框中新增对应的option。第 4 步更新翻译版课程的测验链接。若translations/lang/下存在该语言的课程内容需把所有测验链接加上?loclang查询参数使页面加载即自动选择对应语言机制见上一小节。说明仓库为只读学习资源以上步骤描述的是该应用贡献翻译时的标准改法读者可在自己 fork 的副本中实践。本地开发与构建命令README 的 “Project setup” 一节列出四个命令均可在 quiz-app/package.json 的scripts字段中找到对应实现全部经由vue-cli-service执行# 1. 安装依赖在 quiz-app 目录下 npm install # 2. 开发模式编译并热重载 npm run serve # 3. 生产模式编译并压缩输出到 dist 目录供静态部署使用 npm run build # 4. 检查并自动修复代码风格 npm run lint适用前提Node.js 环境需匹配 Vue CLI 4.5 的工具链该版本对 Node 版本有下限要求遇到依赖安装失败时可参考 INSTALLATION.md 与 TROUBLESHOOTING.md 中的环境排查思路。深度定制编译行为时可按 Vue CLI 的配置文件规范如vue.config.js进行调整——仓库未提供该文件当前项目使用默认构建配置。部署到 Azure Static Web Apps六步 CI/CDREADME 的后半部分是一份完整的 Azure 静态站点部署指南核心是让 GitHub 仓库直接作为构建源由 GitHub Actions 工作流自动完成构建与发布准备 GitHub 仓库确保静态应用代码位于 GitHub 仓库中可 fork 本仓库应用代码位于quiz-app子目录。创建 Static Web App在 Azure 门户中点击 “Create a resource”搜索 “Static Web App” 并创建。配置基础信息选择订阅Subscription、创建或选用资源组Resource Group、为应用命名、选择离目标用户最近的区域Region。配置部署与构建参数部署详情源Source选 “GitHub”完成 Azure 对 GitHub 账户的授权选定组织、仓库与分支构建详情Build Details构建预设Build Presets选择应用所用框架本应用为 Vue应用位置App Location填quiz-app因为代码不在仓库根目录API 位置API Location留空本应用无后端 API输出位置Output Location填dist对应npm run build的产物目录。确认创建Azure 会自动在仓库中生成 GitHub Actions 工作流文件路径为.github/workflows/azure-static-web-apps-名称.yml用于托管后续构建与部署。监控部署在仓库 “Actions” 标签页查看工作流执行完成后应用即部署到 Azure 提供的 URL。README 附带的示例工作流文件参数取值与本仓库实际结构一致name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: upload app_location: quiz-app # 应用源码路径 api_location: # API 源码路径可选本应用无 API output_location: dist # 构建输出目录几个关键细节值得注意工作流由push到main分支及main分支上的 pull_request 事件触发即每次合并到主干都会自动重新构建并上传静态资源app_location与output_location必须与仓库真实结构匹配本仓库中 quiz-app/package.json 位于quiz-app/下Vue CLI 默认输出到dist/这正是文档中两处取值的来源AZURE_STATIC_WEB_APPS_API_TOKEN由 Azure 在创建应用时自动写入仓库 Secrets无需手工配置。小结与延伸阅读本文以quiz-app的 README 为主体还原了该测验应用从数据组织6 个 group 文件、40 道编号测验→ i18n 装配两层 index.js vue-i18n→?loc参数驱动的语言入口 → 本地开发命令 → Azure Static Web Apps 部署的完整技术链路。继续深入可阅读quiz-app/src/App.vue语言下拉框、loc查询参数解析与视图渲染逻辑quiz-app/src/components/Quiz.vue单题渲染与判定组件quiz-app/src/router/路由定义理解 URL 与测验页的对应关系课程正文各课如 1-Introduction/01-defining-data-science/README.md查看测验链接如何在课程页中引用。该应用致谢了原版 simple-quiz-vue 项目本仓库中的爱沙尼亚语 README 由 Co-op Translator 自动翻译生成技术细节以英文原文 quiz-app/README.md 为准。【免费下载链接】Data-Science-For-Beginners10 Weeks, 20 Lessons, Data Science for All!项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考