企业官网建设流程全解析

Data-Science-For-Beginners 测验应用（quiz-app）：Vue 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 可以确认其技术栈版本边界：

测验数据的组织结构：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、quizzes；
• quizzes数组中每一项结构为{ id, title, quiz }，其中id是全局唯一的测验编号，quiz是题目列表，每题含questionText与answerOptions（每个选项含answerText和字符串形式的isCorrect）。

实际分布与编号可以从源文件中读出：

合计 8+8+10+6+6+2 =40，与 README 声明一致。

两层 index.js 的装配约定

测验数据的加载采用“两层装配”：

1. 语言层装配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;

2. 应用层装配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均初始为en；
• App.vue中的语言下拉框使用v-model="locale"绑定选项（en/fr/es），locale变化时通过this.$root.$i18n.locale = val切换 vue-i18n 的活动语言；
• 关键入口逻辑：若路由查询参数存在loc（this.$route.query.loc），则以该值初始化语言，否则回退到"en"。

这就是 README 最后一步要求的原理：各语言翻译版课程中的测验链接带上?loc=fr之类的查询参数，页面打开即自动切换到对应语言。

新增一套翻译测验的标准工作流

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.js，import 新语言并加入messages映射，键名必须与语言目录名一致（README 明确要求“匹配本地化缩写与语言目录名”）。随后在App.vue的下拉框中新增对应的<option>。

第 4 步：更新翻译版课程的测验链接。若translations/<lang>/下存在该语言的课程内容，需把所有测验链接加上?loc=<lang>查询参数，使页面加载即自动选择对应语言（机制见上一小节）。

说明：仓库为只读学习资源，以上步骤描述的是该应用贡献翻译时的标准改法，读者可在自己 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/CD

README 的后半部分是一份完整的 Azure 静态站点部署指南，核心是让 GitHub 仓库直接作为构建源，由 GitHub Actions 工作流自动完成构建与发布：

1. 准备 GitHub 仓库：确保静态应用代码位于 GitHub 仓库中（可 fork 本仓库，应用代码位于quiz-app子目录）。
2. 创建 Static Web App：在 Azure 门户中点击 “Create a resource”，搜索 “Static Web App” 并创建。
3. 配置基础信息：选择订阅（Subscription）、创建或选用资源组（Resource Group）、为应用命名、选择离目标用户最近的区域（Region）。
4. 配置部署与构建参数：
   • 部署详情：源（Source）选 “GitHub”，完成 Azure 对 GitHub 账户的授权，选定组织、仓库与分支；
   • 构建详情（Build Details）：构建预设（Build Presets）选择应用所用框架（本应用为 Vue）；应用位置（App Location）填quiz-app（因为代码不在仓库根目录）；API 位置（API Location）留空（本应用无后端 API）；输出位置（Output Location）填dist（对应npm run build的产物目录）。
5. 确认创建：Azure 会自动在仓库中生成 GitHub Actions 工作流文件，路径为.github/workflows/azure-static-web-apps-<名称>.yml，用于托管后续构建与部署。
6. 监控部署：在仓库 “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/checkout@v2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 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