开课啦

@Opening
教学资源 Resource
Vue.js
Vue.js Router
Pinia
Vite.js
Node.js
Express.js
Vs Code
Chrome
MDN Web Docs
Chaoxing
Snipaste
Yuque
教学详情 Overview
教学详情
课程 前端开发框架与应用
课程代码 054030062
课程性质 专业限制选修
年级专业 23软件工程
学分 3
教学周期 1 - 18
周学时 3
总学时 54 = 18 + 36
教学班级 3班 4班
选修人数 41 48
实训机房 格物1-C404 格物1-C203
教学日 周五 周三
时间 8-9-10 12-13-14
档案编号 82.3 82.4
教学安排 Schedule
to do
课程评价 Evaluation
平时成绩 40%：作业、考勤和表现
60% 作业
30% 考勤
10% 表现
期末成绩 60%
加成 5%：为了鼓励而额外增加的成绩奖励；包括：优秀作业、全勤
5% 加成
作业 Homwork
作业应在规定的时间内，按照要求完成
个人作业独立完成，禁止抄袭；小组作业合理分工，共同完成
作业缺交、不及格、无效等累计达到或超过作业总数1/3，取消课程考试资格
按照教学管理规定，作业缺交的，有1次补交机会
存在抄袭情况的，双方当次作业记0分，取消补交机会
第16教学周统计作业情况
优秀作业（综合评分90+）有加成奖励
请假 Leave
请假应课前提供辅导员签字且加盖学院公章的正规、纸质、无涂改假条
紧急情况下，允许先口头请假；正式假条应在下一个教学日提供，逾期不予采纳
社团、班级等第2课堂活动及其它活动，如果与第1课堂冲突的，不得违规请假占用第1课堂
缺勤、请假、早退等累计达到或超过总次数的1/3，取消课程考试资格
第16教学周统计考勤情况
全勤（100%出勤）有加成奖励
第二十八条 学生某课程旷课或请假的课时数累计达到或超过该门课程学时数三分之一的，不能参加该门课程考试，该门课程必须重修。

学生平时欠交作业,缺做实验的次数分别达到或超过总次数三分之一，或作业、实验报告不及格的，不能参加该门课程考试:必须补做、重做作业和实验，成绩及格后，方可参加该门课程的考试。

第六十七条 请假的规定具体如下:学生请病假或事假，须到学院(直属系)办公室填写请假呈批表，办理请假手续，病假要附医院证明。学生请假 1 天，由辅 导员审批:学生请假 2-3 天，学院 (直属系)办公室主任审批请假 4-10 天，由分管教学院长 (系主任) 审批，报学生处、教务处备案。请假超过 10 天以上的，提交分管学生工作校领导审批，并按上述程序备案。学生获得批假后，均需到任课教师处备案。

除了学校决定的需要学生请假参加的重大活动外，任何学生不得以参加活动为由请假,各管理部门不得以组织各种活动为由批准学生缺课参加活动。

广州新华学院全日制本科学生学籍管理办法
建议 Advice

电脑

耐心

撸码

交流

框架

阅读

思考

教学进度 Agenda
Agenda
Week Content
1

Topic: IDE

1. Vs Code
2. Chrome
3. Project
4. SFC
5. Static Data Server*
2

Topic: Data Binding

1. {{}}
2. v-bind / :
. :src
. :class
. :style
3

Topic: Reactivity

1. ref()
2. reactive()
3. computed()
4

Topic: Rendering

1. v-if
2. v-show
3. v-for
. :key
4. <template>
5

Topic: Evetns

1. Event
. v-on / @
. target currentTarget
2. Classification
. click
. keydown、keyup
. mousedown、mouseup、mousemove...
. submit、reset
. change、input、blur、focus
3. Modifier
. prevent
. stop
. self
4. v-model
. <input> text - value
. <input> radio - checked
. <input> checkbox - checked
. <textarea> - value
5. Lifecycle
. onmounted()
. onUnmounted()
6/清明

Topic: Watch

1. Watch()

. source：ref() reactive() getter() ...

. callback

. options：deep immediate

2. WatchEffect()
7

Topic: Component

1. Registration*

2. defineProps()

3. defineEmits()（3B）

4. defineModel()
8

Topic: Component

1. Provide() & Inject()

2. Slots

. name

3. Style

4. Dynamic*

5. Async*
9

Topic: Router

1. createRouter()
. history
. routes：path component
. linkActiveClass*
. linkExactActiveClass*
2. <RouterLink>
. to
. replace
3. <RouterView>
主路由设计
声明式导航
10/五一

Topic: Router

1. Routes
. 嵌套路由 children
. 命名路由 name
. 重定向路由 redirect
. 动态路由/params
. 查询路由/query
. 404
路由综合设计
11

Topic: Router

1. UseRoute()
. path
. params
. query
. matched
2. UseRouter()
. push()
. replace()
. back()
. forward()
3. Router style
. router-link-active router-link-exact-active
. linkActiveClass linkExactActiveClass
. activeClass exactActiveClass
4. Router guards
. beforeEach()
. afterEach()
. beforeEnter()*
. meta
设计导航样式
更改页面标题
12

Topic: Pinia

1. Concept
2. Usage
13

Topic: Pinia

商品仓库 goods.js
购物车仓库 carts.js
14

Topic: Built-in

1. <KeepAlive>
2. <Transition> <TransitionGroup>
3. Persistedstate*
缓存二级路由组件
动画模态框组件
15

Topic: Third Party

1. Swiper
2. Iconfont
2. Vant
4. LBS
5. Element plus*
6. Supabase*
7. Express*
16

Topic: Mixin

1. Project
2. Module
3. Development
4. Publish
5. Q & A
购物车组件
17

Topic: Mixin

1. Project
2. Module
3. Development
4. Publish
5. Q & A
导航组件
18

Topic: Final
期末验收 Final
考核内容

. 开发设计商城类 WebApp；主题自定

考核方式

. 小组作业；答辩验收

. 答辩时长 5-10分钟

. 请提前调试好项目和PPT等材料

答辩过程

. 组长：介绍小组成员和分工

. 讲述人：就PPT介绍项目开发过程

. 示范人：示范项目，介绍功能、创新点

. 答辩人：抽取随机问题并回答，其他小组成员可以补充，但不能代为回答

资料提交

. 只交1份，由组长完成

. 提交项目：没有代码仓库，项目整体压缩后提交，不包括Module和dist；使用阿拉伯数字，按组号命名，如第1组.rar；有代码仓库，请在实验报告中说明

. 提交小组实验报告：按照 实验模板 要求，导出为PDF再提交，使用阿拉伯数字，按组号命名，如第1组.pdf

. 电子版：实验项目和实验报告统一提交到学习通对应作业

. 纸质版：实验报告双面打印后，侧边打钉，由学委检查、按组号整理后提交到格物 4-208 留档

. 更多详情，请查看 23软工考核方案、项目验收得分表

注意事项

. 小组成绩即为个人成绩

. 禁止抄袭；一经发现，小组成绩记0分

. 期末考核验收，相关材料，包括作业和报告没有补交机会

. 资料缺失或未按要求提交，视为无效作业和报告，相应部分的成绩为0

评分表参考
序号 成员 综合10 模块40 样式20 逻辑30 选做10 得分
其它 Other
建议携带个人笔记本电脑参加授课
教学相关的任何建议，可以随时反馈
课后有答疑需求的同学，正课时间可以移步格物4-208