Summary

本次Lecture首先介绍了下这门课要学什么内容，随后介绍了Assessment 的构成，最后演示了如何构建Vue，以及Vue项目结构的介绍。

一、Assessment - 个人作业

A0 - Six eFolios - 0%

• 6 eFolios Task
• 小任务，Moodle远程提交，不评分，但会得到Feedback
• Week 2, 4, 5, 8, 10, 12周提交
• 提交后 1–2 周内导师会反馈你当前大致水平（Pass/Credit/Distinction/HD）

A1: Studio Assessments Tasks - 20%

• 过程性作业，分四步，每两周提交一次，每次5%
• 可用Figma进行原型设计，基础Web应用经历两次迭代，在课上演示
• 重点在组件、数据绑定、基础路由，后续会给更多细节
• Week 3, 5, 7, 9
• 第 5 周 与 第 7 周课堂演示；含设计报告与基础应用迭代

A2: Quiz - 30%

• 选择题、简答题、情景题
• Week 12进行，应该会使用eExam形式，具体细节待确认

A3: Major Application Development Portfolio and Demonstration Interviews - 50%

• Week 11 提交代码，Week 12 面试
• 不参加面试，该作业成绩上限为69%

二、技术栈与课程重点

• 指定技术：前端 Vue.js，后端/云侧以 Firebase 为例
• 框架限定：课程限定使用本单元指定框架；不可用 React 取代。但很多概念是可迁移的（如 Angular/Svelte 等）。
• 全栈划分：前端（UI/交互）—中间层/Middleware（API/业务胶合）—后端（数据/服务）。
• 版本控制：要求建立 GitHub/GitLab 代码仓库，便于提交与导师评阅。
• 开发方法：先做需求（功能与非功能：可用性/安全性/可扩展性），再做设计（Persona、站点地图/导航等）；课程更贴近 Agile/Scrum 的个人项目节奏。

三、核心 Web 知识与网络基础

• HTML/CSS/JS 各司其职：

  • HTML 定义结构与布局；CSS 负责样式（如 background-color 设置背景色）；JS 带来交互与动态行为。
• DOM 与 SPA：浏览器以 DOM 树组织页面；现代框架通过（虚拟）DOM 优化更新；SPA 旨在减少后端往返与数据请求。
• 网络与协议：

  • 常见应用层协议 HTTP/HTTPS（TLS 加密）、DNS（域名解析到 IP）；Web 的请求-响应模式是核心。
  • 一页多资源会产生多次请求：例如 1 个 HTML + 3 张图片 ⇒ 共 4 次 HTTP 请求；优化方向包括缓存与压缩以减少往返与带宽。
  • 回顾网络五层/OSI 对应层（应用/传输/网络/数据链路/物理），本课重点在应用层。

四、接下来几周的学习路线

• 入门 Vue 组件结构（style / template / script）、作用域样式；逐步过渡到状态管理（Pinia）、路由与HTTP 的无状态特性及其对前端状态的影响。
• 部署：在第 10 周左右学习如何把项目部署到云服务上（将采用指定工具链）。