尧图网站建设 
ML-For-Beginners 测验应用Vue 3 静态测验站点的本地开发与 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模块quiz-app/README.md 及其孟加拉语译本 translations/bn/quiz-app/README.md完整讲解这套承载课程课前/课后测验pre- and post-lecture quizzes的静态 Web 应用从package.json中 npm 脚本的技术栈原理到路由与 i18n 的源码实现再到通过 GitHub Actions 将应用部署为 Azure Static Web App 的完整六步流程与 Workflow 文件参数逐项解析。读完本文读者能够独立完成该应用本地开发环境的搭建、构建与代码检查并可将其托管为线上可用的静态站点。一、quiz-app 在项目中的定位ML-For-Beginners 是一套“12 周、26 课时、52 道测验”的经典机器学习课程。quiz-app是为该课程配套的前端测验应用README 开宗明义地说明这些测验对应 ML 课程大纲中的课前与课后测验。它的形态是一个纯静态 SPASingle Page Application无后端、无数据库题目内容直接以 JSON 形式打包在 i18n 词条中非常适合用 Azure Static Web Apps 这类纯静态托管服务承载也正好呼应了 README 中“部署到 Azure”这一核心章节的动机。二、技术栈与项目结构从 quiz-app/package.json 可以确认该应用的技术选型依赖版本作用vue^3.5.12前端框架vue-i18n^8.26.7多语言支持题目文案按 locale 组织vue-router^3.5.3客户端路由按测验 ID 定位页面core-js^3.6.5浏览器 API polyfillvue/cli-service~5.0.8脚手架serve / build / lint 三大脚本的执行体eslinteslint-plugin-vue^9.33.0 / ^10.4.0代码检查plugin:vue/essentialeslint:recommended目录结构上仓库中的quiz-app组织如下quiz-app/public/index.htmlSPA 入口模板挂载点为#appquiz-app/public/routes.jsonAzure Static Web Apps 的 SPA 回退规则详见下文quiz-app/src/main.js应用入口注册VueI18n并创建全局i18n实例默认与回退语言均为enquiz-app/src/App.vue根组件顶部导航含语言选择器en / fr / it / ja / pt-br / tr / es 共 7 种quiz-app/src/router/index.js路由定义quiz-app/src/views/Home.vue首页列出全部测验quiz-app/src/components/Quiz.vue答题交互组件quiz-app/src/assets/translations/en / es / fr / it / ja / ptbr / tr七个 locale 的 JSON 词条与聚合导出。三、项目搭建与本地开发命令README「Project setup」一节给出的四条命令全部由vue-cli-service驱动可在 quiz-app/package.json 的scripts字段中逐一核实# 安装依赖 npm install # 编译并启用热重载开发模式对应 vue-cli-service serve npm run serve # 编译并压缩生产构建对应 vue-cli-service build产物输出到 dist 目录 npm run build # 代码检查并自动修复对应 vue-cli-service lint npm run lint几点值得注意的实现细节构建产物目录npm run build使用 Vue CLI 5 的默认输出目录dist这正对应后文 Azure 部署参数output_location: dist的取值来源两者必须保持一致。浏览器兼容目标package.json中browserslist配置为 1%, last 2 versions, not deadbabelquiz-app/babel.config.js 使用vue/cli-plugin-babel/preset会据此决定 polyfill 范围。ESLint 内嵌配置package.json自带eslintConfig块root: trueparser 为babel-eslint因此npm run lint无需额外配置文件即可工作该包声明private: true包名为quizzes仅作为内部应用使用不会发布到 npm。四、路由与多语言读懂两个关键文件4.1 history 模式路由与 SPA 回退从 quiz-app/src/router/index.js 看路由采用mode: historyURL 不含#号共三条路由/→Home.vue通过 i18n 词条quizzes渲染测验列表每项链接指向quiz/id/quiz/:id→Quiz.vue按路由参数id匹配题目/:pathMatch(.*)*→NotFound.vue兜底 404 页。history 模式有一个部署前提直接访问/quiz/xxx这类深层链接时服务器必须把未命中静态文件的请求都回退到index.html由前端路由接管。这正是仓库中 quiz-app/public/routes.json 的作用——它是 Azure Static Web Apps 官方支持的 SPA 回退配置{ routes: [ { route: /*, serve: /index.html } ] }部署时该文件随dist一起发布Azure 静态托管层便会对任意路径返回index.html客户端路由才能正确工作。4.2 多语言与答题逻辑main.js中创建全局VueI18n实例locale: en、fallbackLocale: enquiz-app/src/App.vue 的导航栏通过watch监听语言选择器并将值写入this.$root.$i18n.locale同时支持通过 URL 查询参数?locxx初始化语言。题目数据本身来自各 locale 的 JSONquiz-app/src/assets/translations/index.js 将 7 个 JSON 聚合为messages导出Home.vue与Quiz.vue均通过this.$t(quizzes)读取题目列表$t(title)、$t(complete)、$t(error)则负责界面文案。quiz-app/src/components/Quiz.vue 中的handleAnswerClick方法实现了核心答题流程答对则currentQuestion递增源码注释明确约定「每个测验固定 3 题」nextQuestion 3时进入下一题否则置complete true显示完成提示答错则置error true显示错误提示。由于题目内容完全内嵌于 i18n 词条替换题目即替换对应 locale 的 JSON 文件无需改动任何组件代码。五、部署到 Azure Static Web Apps 完整流程README 的「Deploying to Azure」一节给出了六步官方流程此处完整继承并结合本仓库实际情况说明。第 1 步Fork GitHub 仓库静态 Web 应用代码必须位于你的 GitHub 仓库中。将 ML-For-Beginners 仓库 Fork 到自己名下本仓库地址为https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners可按需 clone 后推入自己的 GitHub 仓库。第 2 步创建 Azure Static Web App创建 Azure 账号azure.microsoft.com进入 Azure 门户portal.azure.com点击 “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 CLI 项目App Location应用代码所在目录。本仓库中 quiz-app 位于仓库根目录的quiz-app子目录package.json在 quiz-app/package.json因此应填/quiz-app这也是下文章节 Workflow 示例中app_location: /quiz-app的由来API Location若有 API 则填写其位置可选本应用无 API留空Output Location构建产物输出目录Vue CLI 5 默认为dist。第 4 步Review and Create核对设置后点击 “Create”。Azure 会自动创建所需资源并在你的仓库中注入一个 GitHub Actions workflow。第 5 步GitHub Actions WorkflowAzure 会在仓库中自动生成 workflow 文件.github/workflows/azure-static-web-apps-name.yml由它接管后续所有构建与部署push 触发PR 触发预览。README 给出的示例文件如下其中第 106 行api_location原文存在笔误缺少右引号规范写法应为api_location: # API source code path optional本应用无 API保持空字符串即可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 # App source code path api_location: # API source code path optional output_location: dist # Built app content directory - optional关键参数逐项说明参数取值含义azure_static_web_apps_api_token${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}Azure 在第 4 步 “Create” 时自动写入仓库 Secrets 的部署令牌repo_token${{ secrets.GITHUB_TOKEN }}GitHub 内置 token供 PR 预览环境preview签发actionupload本步骤仅上传构建产物安装依赖与npm run build由该 Action 在预设的框架模板中自动完成app_location/quiz-app源码路径必须指向含package.json的目录api_location可选无后端时留空output_locationdist必须与 Vue CLI 构建输出目录一致触发条件上push到main会触发生产部署pull_request的 opened / synchronize / reopened / closed 事件会触发 PR 预览部署closed 时清理预览环境。第 6 步监控部署进入 GitHub 仓库的 “Actions” 标签页可以看到 workflow 正在运行。该 workflow 会安装依赖、执行构建并把dist产物包含 quiz-app/public/routes.json 的 SPA 回退规则上传至 Azure。workflow 成功后应用即在 Azure 分配的 URL 上线此后每次向main分支 push 都会自动重新构建部署。六、小结与延伸阅读该应用展示了课程仓库中一个完整但轻量的工程闭环Vue 3 vue-i18n 的前端实现quiz-app/src 入口、路由、答题组件、Vue CLI 5 驱动的serve / build / lint工作流quiz-app/package.json以及通过app_location: /quiz-appoutput_location: distroutes.json三个关键点把 SPA 正确交给 Azure Static Web Apps 的 CI/CD 管线。更多背景可参考仓库中的 CONTRIBUTING.md 与课程总入口 README.md课程大纲各章节如 3-Web-App则演示了如何把机器学习模型本身打包成可部署的 Web 应用可与本文的静态托管流程互为补充。【免费下载链接】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 3 静态测验站点的本地开发与 Azure Static Web Apps 部署实战
ML-For-Beginners 测验应用Vue 3 静态测验站点的本地开发与 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模块quiz-app/README.md 及其孟加拉语译本 translations/bn/quiz-app/README.md完整讲解这套承载课程课前/课后测验pre- and post-lecture quizzes的静态 Web 应用从package.json中 npm 脚本的技术栈原理到路由与 i18n 的源码实现再到通过 GitHub Actions 将应用部署为 Azure Static Web App 的完整六步流程与 Workflow 文件参数逐项解析。读完本文读者能够独立完成该应用本地开发环境的搭建、构建与代码检查并可将其托管为线上可用的静态站点。一、quiz-app 在项目中的定位ML-For-Beginners 是一套“12 周、26 课时、52 道测验”的经典机器学习课程。quiz-app是为该课程配套的前端测验应用README 开宗明义地说明这些测验对应 ML 课程大纲中的课前与课后测验。它的形态是一个纯静态 SPASingle Page Application无后端、无数据库题目内容直接以 JSON 形式打包在 i18n 词条中非常适合用 Azure Static Web Apps 这类纯静态托管服务承载也正好呼应了 README 中“部署到 Azure”这一核心章节的动机。二、技术栈与项目结构从 quiz-app/package.json 可以确认该应用的技术选型依赖版本作用vue^3.5.12前端框架vue-i18n^8.26.7多语言支持题目文案按 locale 组织vue-router^3.5.3客户端路由按测验 ID 定位页面core-js^3.6.5浏览器 API polyfillvue/cli-service~5.0.8脚手架serve / build / lint 三大脚本的执行体eslinteslint-plugin-vue^9.33.0 / ^10.4.0代码检查plugin:vue/essentialeslint:recommended目录结构上仓库中的quiz-app组织如下quiz-app/public/index.htmlSPA 入口模板挂载点为#appquiz-app/public/routes.jsonAzure Static Web Apps 的 SPA 回退规则详见下文quiz-app/src/main.js应用入口注册VueI18n并创建全局i18n实例默认与回退语言均为enquiz-app/src/App.vue根组件顶部导航含语言选择器en / fr / it / ja / pt-br / tr / es 共 7 种quiz-app/src/router/index.js路由定义quiz-app/src/views/Home.vue首页列出全部测验quiz-app/src/components/Quiz.vue答题交互组件quiz-app/src/assets/translations/en / es / fr / it / ja / ptbr / tr七个 locale 的 JSON 词条与聚合导出。三、项目搭建与本地开发命令README「Project setup」一节给出的四条命令全部由vue-cli-service驱动可在 quiz-app/package.json 的scripts字段中逐一核实# 安装依赖 npm install # 编译并启用热重载开发模式对应 vue-cli-service serve npm run serve # 编译并压缩生产构建对应 vue-cli-service build产物输出到 dist 目录 npm run build # 代码检查并自动修复对应 vue-cli-service lint npm run lint几点值得注意的实现细节构建产物目录npm run build使用 Vue CLI 5 的默认输出目录dist这正对应后文 Azure 部署参数output_location: dist的取值来源两者必须保持一致。浏览器兼容目标package.json中browserslist配置为 1%, last 2 versions, not deadbabelquiz-app/babel.config.js 使用vue/cli-plugin-babel/preset会据此决定 polyfill 范围。ESLint 内嵌配置package.json自带eslintConfig块root: trueparser 为babel-eslint因此npm run lint无需额外配置文件即可工作该包声明private: true包名为quizzes仅作为内部应用使用不会发布到 npm。四、路由与多语言读懂两个关键文件4.1 history 模式路由与 SPA 回退从 quiz-app/src/router/index.js 看路由采用mode: historyURL 不含#号共三条路由/→Home.vue通过 i18n 词条quizzes渲染测验列表每项链接指向quiz/id/quiz/:id→Quiz.vue按路由参数id匹配题目/:pathMatch(.*)*→NotFound.vue兜底 404 页。history 模式有一个部署前提直接访问/quiz/xxx这类深层链接时服务器必须把未命中静态文件的请求都回退到index.html由前端路由接管。这正是仓库中 quiz-app/public/routes.json 的作用——它是 Azure Static Web Apps 官方支持的 SPA 回退配置{ routes: [ { route: /*, serve: /index.html } ] }部署时该文件随dist一起发布Azure 静态托管层便会对任意路径返回index.html客户端路由才能正确工作。4.2 多语言与答题逻辑main.js中创建全局VueI18n实例locale: en、fallbackLocale: enquiz-app/src/App.vue 的导航栏通过watch监听语言选择器并将值写入this.$root.$i18n.locale同时支持通过 URL 查询参数?locxx初始化语言。题目数据本身来自各 locale 的 JSONquiz-app/src/assets/translations/index.js 将 7 个 JSON 聚合为messages导出Home.vue与Quiz.vue均通过this.$t(quizzes)读取题目列表$t(title)、$t(complete)、$t(error)则负责界面文案。quiz-app/src/components/Quiz.vue 中的handleAnswerClick方法实现了核心答题流程答对则currentQuestion递增源码注释明确约定「每个测验固定 3 题」nextQuestion 3时进入下一题否则置complete true显示完成提示答错则置error true显示错误提示。由于题目内容完全内嵌于 i18n 词条替换题目即替换对应 locale 的 JSON 文件无需改动任何组件代码。五、部署到 Azure Static Web Apps 完整流程README 的「Deploying to Azure」一节给出了六步官方流程此处完整继承并结合本仓库实际情况说明。第 1 步Fork GitHub 仓库静态 Web 应用代码必须位于你的 GitHub 仓库中。将 ML-For-Beginners 仓库 Fork 到自己名下本仓库地址为https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners可按需 clone 后推入自己的 GitHub 仓库。第 2 步创建 Azure Static Web App创建 Azure 账号azure.microsoft.com进入 Azure 门户portal.azure.com点击 “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 CLI 项目App Location应用代码所在目录。本仓库中 quiz-app 位于仓库根目录的quiz-app子目录package.json在 quiz-app/package.json因此应填/quiz-app这也是下文章节 Workflow 示例中app_location: /quiz-app的由来API Location若有 API 则填写其位置可选本应用无 API留空Output Location构建产物输出目录Vue CLI 5 默认为dist。第 4 步Review and Create核对设置后点击 “Create”。Azure 会自动创建所需资源并在你的仓库中注入一个 GitHub Actions workflow。第 5 步GitHub Actions WorkflowAzure 会在仓库中自动生成 workflow 文件.github/workflows/azure-static-web-apps-name.yml由它接管后续所有构建与部署push 触发PR 触发预览。README 给出的示例文件如下其中第 106 行api_location原文存在笔误缺少右引号规范写法应为api_location: # API source code path optional本应用无 API保持空字符串即可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 # App source code path api_location: # API source code path optional output_location: dist # Built app content directory - optional关键参数逐项说明参数取值含义azure_static_web_apps_api_token${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}Azure 在第 4 步 “Create” 时自动写入仓库 Secrets 的部署令牌repo_token${{ secrets.GITHUB_TOKEN }}GitHub 内置 token供 PR 预览环境preview签发actionupload本步骤仅上传构建产物安装依赖与npm run build由该 Action 在预设的框架模板中自动完成app_location/quiz-app源码路径必须指向含package.json的目录api_location可选无后端时留空output_locationdist必须与 Vue CLI 构建输出目录一致触发条件上push到main会触发生产部署pull_request的 opened / synchronize / reopened / closed 事件会触发 PR 预览部署closed 时清理预览环境。第 6 步监控部署进入 GitHub 仓库的 “Actions” 标签页可以看到 workflow 正在运行。该 workflow 会安装依赖、执行构建并把dist产物包含 quiz-app/public/routes.json 的 SPA 回退规则上传至 Azure。workflow 成功后应用即在 Azure 分配的 URL 上线此后每次向main分支 push 都会自动重新构建部署。六、小结与延伸阅读该应用展示了课程仓库中一个完整但轻量的工程闭环Vue 3 vue-i18n 的前端实现quiz-app/src 入口、路由、答题组件、Vue CLI 5 驱动的serve / build / lint工作流quiz-app/package.json以及通过app_location: /quiz-appoutput_location: distroutes.json三个关键点把 SPA 正确交给 Azure Static Web Apps 的 CI/CD 管线。更多背景可参考仓库中的 CONTRIBUTING.md 与课程总入口 README.md课程大纲各章节如 3-Web-App则演示了如何把机器学习模型本身打包成可部署的 Web 应用可与本文的静态托管流程互为补充。【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考