ML-For-Beginners 配套测验应用Vue 前端本地运行与 Azure Static Web Apps 部署实战【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners本指南围绕 ML-For-Beginners 机器学习课程仓库中的配套测验应用quiz-app展开系统讲解该 Vue 单页应用的项目结构、本地开发命令以及如何将其一键部署到 Azure Static Web Apps 并接入 GitHub Actions 实现持续交付。文章主体整理自仓库内 translations/bg/quiz-app/README.md英文原版见 quiz-app/README.md并补充仓库源码级的实现细节读完即可在本地运行测验并完成云端发布。一、应用定位承载课程课前/课后测验的 Vue 前端ML-For-Beginners 课程采用“每个主题一段视频 课前测验 课后测验”的教学节奏配套的测验应用即仓库根目录下的 quiz-app 目录。它是一个纯前端单页应用无后端 API数据全部内嵌在本地 JSON 中负责向学习者展示每个主题的两段测验。从仓库源码结构可以还原出它的核心组成入口与启动创建 Vue 实例并装配 vue-i18n默认语言与回退语言均为en与路由路由定义包含首页/、测验页/quiz/:id以及兜底的NotFound路由测验组件真正渲染题目、判断对错的核心组件首页视图以链接列表形式列出所有测验题目数据以 JSON 形式存放标题、题目、选项与正确答案。值得注意的是测验数据全部来自 i18n 词条quizzesHome 与 Quiz 组件都通过this.$t(quizzes)读取因此新增测验不需要改组件只需往 JSON 中追加一个 quiz 对象即可。二、项目结构与测验内容组织测验应用采用经典 Vue CLI 工程布局关键信息记录在 package.json依赖以vue与vue-i18n、vue-router为核心构建由vue/cli-service驱动脚本仅保留三条serve本地开发、build生产构建、lint静态检查浏览器兼容目标browserslist为 1%、last 2 versions、not dead。题目数据结构见 en.json为三层嵌套quizzes[].id 测验序号 quizzes[].title 测验标题如 Introduction to Machine Learning: Pre-Lecture Quiz quizzes[].quiz[] 题目数组每题含 questionText 与 answerOptions[] answerOptions[].answerText 选项文案 answerOptions[].isCorrect 是否正确答案true/false 字符串答题流程在 Quiz.vue 中实现每次测验固定 3 道题点击带isCorrect true的选项才进入下一题选错则显示“Sorry, try again”并要求重试3 题全部答对后展示完成提示$t(complete)。这种“答对才前进”的设计保证了学习者在进入下一题前必须理解当前知识点。三、多语言与按链接直达语言测验应用内置了语言切换能力。国际化的词条文件位于 quiz-app/src/assets/translations支持en、tr、fr、ja、it、ptbr、es共 7 种语言由 index.js 统一汇入。语言切换有两条路径见 App.vue 顶栏的locale下拉框与created()钩子在页面顶栏下拉框直接选择语言通过 URL 查询参数?locxx预选语言——例如部署后访问/quiz/1?locja可直达日语版本的测验Quiz 组件同样读取了$route.query.loc。由于仓库为多语言翻译仓库各翻译目录如 translations/bg/quiz-app/README.md即使用该机制向不同语种学习者分发同一套测验体验。四、本地环境搭建与运行1. 安装依赖在仓库根目录包含 quiz-app/package.json 的位置执行npm install该命令会依据package.json安装vue、vue-i18n、vue-router及vue/cli-service等依赖并生成锁文件保证后续构建环境一致。2. 开发模式编译 热重载npm run serve脚本实际执行vue-cli-service serve会启动本地开发服务器并监听文件变更做热重载Hot Module Replacement适合在编辑题目 JSON 或组件时即时预览效果。默认情况下浏览器访问终端输出的本地地址通常为http://localhost:8080即可看到测验首页。3. 生产构建编译并压缩npm run build脚本实际执行vue-cli-service build产物默认输出到应用代码目录下的dist/文件夹——这个路径与下文部署到 Azure 时的Output Location直接对应。Vue CLI 会在此过程中完成 JS/CSS 压缩、静态资源指纹化等工作。4. 代码检查与修复npm run lint脚本实际执行vue-cli-service lint基于 package.json 中声明的eslint:recommended与plugin:vue/essential规则对源文件做静态检查发现问题时自动修复可自动修复项。五、部署到 Azure Static Web Apps测验应用是纯静态站点非常适合托管在 Azure Static Web Apps 上。官方文档给出的部署流程共六步以下是结合本仓库结构的完整解读。第 1 步Fork GitHub 仓库确保静态应用的代码位于你自己的 GitHub 仓库中先 Fork 本仓库。Fork 之后本仓库根目录下的 quiz-app 目录含package.json、src 等即是你待部署的静态应用源码位置。第 2 步创建 Azure Static Web App注册并登录 Azure 门户创建 Azure 账户点击“Create a resource”搜索“Static Web App”点击“Create”进入创建向导。第 3 步配置静态 Web 应用创建向导分为三组配置各组含义如下表分组配置项填写说明Basics基础设置Subscription选择你的 Azure 订阅Resource Group新建或选择已有资源组Name为静态 Web 应用命名Region选择离你的用户最近的区域Deployment details部署信息Source选择 “GitHub”GitHub Account授权 Azure 访问你的 GitHub 账户Organization选择你的 GitHub 组织Repository选择包含静态应用代码的仓库Branch选择要部署的分支Build details构建信息Build Presets选择应用所用框架本应用为 Vue.jsApp Location应用代码所在目录本仓库即/quiz-app代码在根目录则填/API Location如无后端 API 可留空本应用为纯前端Output Location构建产物目录即dist结合当前仓库的实际布局来解释这三处路径测验应用的package.json位于仓库的 quiz-app/package.json因此App Location 填/quiz-app仓库中没有额外 API 服务因此API Location 留空npm run build由 package.json 中的vue-cli-service build触发默认输出到quiz-app/dist因此Output Location 填dist该路径相对于 App Location 解析。第 4 步审阅并创建检查上述配置无误后点击“Create”。Azure 会自动创建所需资源并在你 Fork 的仓库中生成 GitHub Actions workflow 文件路径形如.github/workflows/azure-static-web-apps-name.yml该文件即后续构建与部署的自动化流水线。第 5 步认识 GitHub Actions WorkflowAzure 生成的 workflow 会自动接管构建与部署并把部署令牌以 Secret 形式注入仓库。整理官方文档中的示例并修正注释格式后等效的 workflow 文件如下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 # 构建产物目录相对 App Location可省略关键参数的含义azure_static_web_apps_api_token由 Azure 在创建应用时自动写入仓库 Secret 的部署令牌是流水线向 Azure 鉴权的凭据repo_token使用 GitHub 自动提供的GITHUB_TOKEN用于授权部署操作读写仓库action: upload执行上传构建产物的部署动作当pull_request事件类型为closed时官方实践中常改为close_pull_request以清理对应 PR 的预览环境app_location指向含package.json的应用目录本仓库为/quiz-appoutput_location指向构建输出目录distAzure 会将该目录内容作为静态站点对外发布。触发条件方面on.push保证每次向main分支推送都会触发生产发布on.pull_request配合types: [opened, synchronize, reopened, closed]则会在 PR 打开、更新或关闭时触发从而可为每次 PR 生成临时预览站点。第 6 步监控部署结果进入 Fork 仓库的“Actions”标签页此时应能看到正在运行的 workflow它会自动执行依赖安装、生产构建npm run build并部署到 Azureworkflow 完成后应用即上线于 Azure 提供的 URL形如https://name.region.azurestaticapps.net学习者即可通过该链接访问课前/课后测验。六、小结与注意事项部署链路可概括为Fork 仓库 → 创建 Azure Static Web App 并填写Basics / Deployment details / Build details→ Azure 自动生成 GitHub Actions workflow → 推送main分支或打开 PR 即触发构建与发布路径参数务必与实际仓库对齐本仓库的 App Location 为/quiz-appOutput Location 为distAPI Location 留空测验内容与题目不依赖后端全部维护在 quiz-app/src/assets/translations 的 JSON 词典中改题只需编辑 JSON 并按常规流程提交CI 会自动重新构建上线本地联调建议始终以npm run serve的开发服务器为准部署前先执行一次npm run build与npm run lint确保dist产物完整且代码通过静态检查。【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ML-For-Beginners 配套测验应用：Vue 前端本地运行与 Azure Static Web Apps 部署实战
ML-For-Beginners 配套测验应用Vue 前端本地运行与 Azure Static Web Apps 部署实战【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners本指南围绕 ML-For-Beginners 机器学习课程仓库中的配套测验应用quiz-app展开系统讲解该 Vue 单页应用的项目结构、本地开发命令以及如何将其一键部署到 Azure Static Web Apps 并接入 GitHub Actions 实现持续交付。文章主体整理自仓库内 translations/bg/quiz-app/README.md英文原版见 quiz-app/README.md并补充仓库源码级的实现细节读完即可在本地运行测验并完成云端发布。一、应用定位承载课程课前/课后测验的 Vue 前端ML-For-Beginners 课程采用“每个主题一段视频 课前测验 课后测验”的教学节奏配套的测验应用即仓库根目录下的 quiz-app 目录。它是一个纯前端单页应用无后端 API数据全部内嵌在本地 JSON 中负责向学习者展示每个主题的两段测验。从仓库源码结构可以还原出它的核心组成入口与启动创建 Vue 实例并装配 vue-i18n默认语言与回退语言均为en与路由路由定义包含首页/、测验页/quiz/:id以及兜底的NotFound路由测验组件真正渲染题目、判断对错的核心组件首页视图以链接列表形式列出所有测验题目数据以 JSON 形式存放标题、题目、选项与正确答案。值得注意的是测验数据全部来自 i18n 词条quizzesHome 与 Quiz 组件都通过this.$t(quizzes)读取因此新增测验不需要改组件只需往 JSON 中追加一个 quiz 对象即可。二、项目结构与测验内容组织测验应用采用经典 Vue CLI 工程布局关键信息记录在 package.json依赖以vue与vue-i18n、vue-router为核心构建由vue/cli-service驱动脚本仅保留三条serve本地开发、build生产构建、lint静态检查浏览器兼容目标browserslist为 1%、last 2 versions、not dead。题目数据结构见 en.json为三层嵌套quizzes[].id 测验序号 quizzes[].title 测验标题如 Introduction to Machine Learning: Pre-Lecture Quiz quizzes[].quiz[] 题目数组每题含 questionText 与 answerOptions[] answerOptions[].answerText 选项文案 answerOptions[].isCorrect 是否正确答案true/false 字符串答题流程在 Quiz.vue 中实现每次测验固定 3 道题点击带isCorrect true的选项才进入下一题选错则显示“Sorry, try again”并要求重试3 题全部答对后展示完成提示$t(complete)。这种“答对才前进”的设计保证了学习者在进入下一题前必须理解当前知识点。三、多语言与按链接直达语言测验应用内置了语言切换能力。国际化的词条文件位于 quiz-app/src/assets/translations支持en、tr、fr、ja、it、ptbr、es共 7 种语言由 index.js 统一汇入。语言切换有两条路径见 App.vue 顶栏的locale下拉框与created()钩子在页面顶栏下拉框直接选择语言通过 URL 查询参数?locxx预选语言——例如部署后访问/quiz/1?locja可直达日语版本的测验Quiz 组件同样读取了$route.query.loc。由于仓库为多语言翻译仓库各翻译目录如 translations/bg/quiz-app/README.md即使用该机制向不同语种学习者分发同一套测验体验。四、本地环境搭建与运行1. 安装依赖在仓库根目录包含 quiz-app/package.json 的位置执行npm install该命令会依据package.json安装vue、vue-i18n、vue-router及vue/cli-service等依赖并生成锁文件保证后续构建环境一致。2. 开发模式编译 热重载npm run serve脚本实际执行vue-cli-service serve会启动本地开发服务器并监听文件变更做热重载Hot Module Replacement适合在编辑题目 JSON 或组件时即时预览效果。默认情况下浏览器访问终端输出的本地地址通常为http://localhost:8080即可看到测验首页。3. 生产构建编译并压缩npm run build脚本实际执行vue-cli-service build产物默认输出到应用代码目录下的dist/文件夹——这个路径与下文部署到 Azure 时的Output Location直接对应。Vue CLI 会在此过程中完成 JS/CSS 压缩、静态资源指纹化等工作。4. 代码检查与修复npm run lint脚本实际执行vue-cli-service lint基于 package.json 中声明的eslint:recommended与plugin:vue/essential规则对源文件做静态检查发现问题时自动修复可自动修复项。五、部署到 Azure Static Web Apps测验应用是纯静态站点非常适合托管在 Azure Static Web Apps 上。官方文档给出的部署流程共六步以下是结合本仓库结构的完整解读。第 1 步Fork GitHub 仓库确保静态应用的代码位于你自己的 GitHub 仓库中先 Fork 本仓库。Fork 之后本仓库根目录下的 quiz-app 目录含package.json、src 等即是你待部署的静态应用源码位置。第 2 步创建 Azure Static Web App注册并登录 Azure 门户创建 Azure 账户点击“Create a resource”搜索“Static Web App”点击“Create”进入创建向导。第 3 步配置静态 Web 应用创建向导分为三组配置各组含义如下表分组配置项填写说明Basics基础设置Subscription选择你的 Azure 订阅Resource Group新建或选择已有资源组Name为静态 Web 应用命名Region选择离你的用户最近的区域Deployment details部署信息Source选择 “GitHub”GitHub Account授权 Azure 访问你的 GitHub 账户Organization选择你的 GitHub 组织Repository选择包含静态应用代码的仓库Branch选择要部署的分支Build details构建信息Build Presets选择应用所用框架本应用为 Vue.jsApp Location应用代码所在目录本仓库即/quiz-app代码在根目录则填/API Location如无后端 API 可留空本应用为纯前端Output Location构建产物目录即dist结合当前仓库的实际布局来解释这三处路径测验应用的package.json位于仓库的 quiz-app/package.json因此App Location 填/quiz-app仓库中没有额外 API 服务因此API Location 留空npm run build由 package.json 中的vue-cli-service build触发默认输出到quiz-app/dist因此Output Location 填dist该路径相对于 App Location 解析。第 4 步审阅并创建检查上述配置无误后点击“Create”。Azure 会自动创建所需资源并在你 Fork 的仓库中生成 GitHub Actions workflow 文件路径形如.github/workflows/azure-static-web-apps-name.yml该文件即后续构建与部署的自动化流水线。第 5 步认识 GitHub Actions WorkflowAzure 生成的 workflow 会自动接管构建与部署并把部署令牌以 Secret 形式注入仓库。整理官方文档中的示例并修正注释格式后等效的 workflow 文件如下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 # 构建产物目录相对 App Location可省略关键参数的含义azure_static_web_apps_api_token由 Azure 在创建应用时自动写入仓库 Secret 的部署令牌是流水线向 Azure 鉴权的凭据repo_token使用 GitHub 自动提供的GITHUB_TOKEN用于授权部署操作读写仓库action: upload执行上传构建产物的部署动作当pull_request事件类型为closed时官方实践中常改为close_pull_request以清理对应 PR 的预览环境app_location指向含package.json的应用目录本仓库为/quiz-appoutput_location指向构建输出目录distAzure 会将该目录内容作为静态站点对外发布。触发条件方面on.push保证每次向main分支推送都会触发生产发布on.pull_request配合types: [opened, synchronize, reopened, closed]则会在 PR 打开、更新或关闭时触发从而可为每次 PR 生成临时预览站点。第 6 步监控部署结果进入 Fork 仓库的“Actions”标签页此时应能看到正在运行的 workflow它会自动执行依赖安装、生产构建npm run build并部署到 Azureworkflow 完成后应用即上线于 Azure 提供的 URL形如https://name.region.azurestaticapps.net学习者即可通过该链接访问课前/课后测验。六、小结与注意事项部署链路可概括为Fork 仓库 → 创建 Azure Static Web App 并填写Basics / Deployment details / Build details→ Azure 自动生成 GitHub Actions workflow → 推送main分支或打开 PR 即触发构建与发布路径参数务必与实际仓库对齐本仓库的 App Location 为/quiz-appOutput Location 为distAPI Location 留空测验内容与题目不依赖后端全部维护在 quiz-app/src/assets/translations 的 JSON 词典中改题只需编辑 JSON 并按常规流程提交CI 会自动重新构建上线本地联调建议始终以npm run serve的开发服务器为准部署前先执行一次npm run build与npm run lint确保dist产物完整且代码通过静态检查。【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
