| 课时 |
主题 |
内容安排 |
| 0.5 天 |
Node.js 模块化开发 |
1 、初识 Node.js
1.1 Node.js 简介
1.2 Node.js 中的 JavaScript 运行环境
2 、 fs 文件系统模块
2.1 使用 readFile 方法读取文件的内容
2.2 判断文件是否读取成功
2.3 写入文件内容
2.4 案例 - 整理成绩
2.5 fs 模块 - 路径动态拼接的问题
3 、 path 路径模块
3.1 path.join 方法的使用
3.2 获取路径中的文件名
3.3 获取路径中的文件扩展名（文件后缀）
3.4 综合案例 - 时钟案例
4 、 http 模块
4.1 服务器相关的概念
4.1.1 IP 地址
4.1.2 域名和域名服务器
4.1.3 端口号
4.2 创建最基本的 web 服务器
4.3 了解 req 请求对象
4.4 解决中文乱码问题
4.5 根据不同的 url 响应不同的 html 内容
4.6 案例 - 实现 clock 时钟的 web 服务器
5 、模块化
5.1 模块化的基本概念
5.1.1 什么是模块化
5.1.2 模块化规范
5.2 Node.js 中模块化
5.2.1 Node.js 中模块的分类
5.2.2 加载模块
5.2.3 Node.js 中的模块作用域
5.2.4 向外共享模块作用域中的成员
5.2.5 Node.js 中的模块化规范
5.3 模块的加载机制
5.4. 导入（引入）模块
5.5. CommonJS 规范
6 、包管理工具
6.1 、概念介绍
6.1.1 包是什么
6.1.2 包管理工具
6.1.3 常用的包管理工具
6.2 、 npm
6.2.1 npm 的安装
6.2.2 npm 基本使用
6.2.3 生产环境与开发环境
6.2.4 生产依赖与开发依赖
6.2.5 全局安装
6.2.6 安装包依赖
6.2.7 安装指定版本的包
6.2.8 删除依赖
6.2.9 配置命令别名
6.3 、 cnpm
6.3.1 介绍
6.3.2 安装
6.3.3 操作命令
6.3.4 npm 配置淘宝镜像
6.4 、 yarn
6.4.1 yarn 介绍
6.4.2 yarn 特点
6.4.3 yarn 安装
6.4.4 yarn 常用命令
6.4.5 yarn 配置淘宝镜像
6.4.6 npm 和 yarn 选择
6.5 、管理发布包
6.5.1 创建与发布
6.5.2 更新包
6.5.3 删除包
7 、 nvm 版本管理工具
8 、 express 框架
8.1 、 express 介绍
8.2 、 express 使用
8.3 、 express 路由
8.3.1 什么是路由
8.3.2 路由的使用
8.3.3 获取请求参数
8.3.4 获取路由参数
8.4 、 express 响应设置
8.5 、 express 中间件
8.5.1 什么是中间件
8.5.2 中间件的作用
8.5.3 中间件的类型
8.5.3.1 定义全局中间件
8.5.3.2 多个全局中间件
8.5.3.3 定义路由中间件
8.5.4 静态资源中间件
8.5.5 获取请求体数据 body-parser
8.6 、 Router
8.6.1 什么是 Router
8.6.2 Router 作用
8.6.3 Router 使用
8.7 、 Node 开发基于 Restful 风格的 API 接口 |
| 0.5 天 |
Vue3 基础语法 |
1.Vue 简介
2.Vue API 风格
3.Vue 开发前的准备
4.Vue 项目目录结构
5.Vue 语法
• 模板语法
• 属性绑定
• 条件渲染
• 列表渲染
• 通过 key 管理状态
• 事件处理
• 事件参数
• 事件修饰符
• 数组变化侦测
• 计算属性
• Class 绑定
• Style 绑定
• 侦听器
• 表单输入绑定
• 模板引用 |
| Vue3.0 组件 |
1. 局部 / 全局组件
• 局部组件
• 全局组件
2. 递归组件
• 什么是递归组件
• 递归菜单树
• 定义公共数据类型接口
• 父组件中使用子组件
• 子组件中的第一个 script 标签
• 子组件中的第二个 script 标签
• 子组件中的 template 标签
3. 动态组件 Component
• 什么是动态组件
• 实现 Tab 切换
• 使用动态组件时，控制台出现警告
• 动态组件 绑定字符串、绑定组件实例
4. 异步组件 suspense
• 为什么要使用异步组件
• defineAsyncComponent 配合 import() 实现分包
• 使用异步组件 suspense
5. 父子组件传值
• 父组件给子组件传值 —— v-bind
• 子组件接收父组件的传值 —— defineProps
• 设置子组件接受参数的默认值 —— withDefaults
• 子组件给父组件传参（派发事件） —— defineEmits
• 子组件暴露给父组件内部属性 —— defineExpose
6 、插槽
• 什么是插槽
• 匿名插槽
• 具名插槽
• 作用域插槽
• 动态插槽
7 、提供 / 注入
• 提供 / 注入是什么
• 父组件暴露（提供）数据—— provide 基本用法
• 子组件接收（注入）数据—— inject 基本用法
8 、兄弟组件传值
• EventBus 原理
• Mitt
• 安装 mitt
• 新建 mitt-bus.ts
• 使用 mitt 发送事件
• 使用 mitt 接收事件
• 在全局实例上使用 mitt
9 、 keep-alive 缓存组件
• 为什么要使用 keep-alive
• 开启 keep-alive 时的生命周期
• keep-alive 使用方法
10 、 transition 动画组件
• tansition 组件基础用法
• 自定义类名，并使用 animate.css
• ransition 生命周期，使用 GSAP
• appear
11. transition-group 动画列表
• 列表项过渡
• 平面过渡
• 状态过渡 |
| 0.5 天 |
Vue Router 路由 |
1 、安装和配置 Vue Router
• 安装 Vue Router
• 配置 Vue Router
2 、 Vue Router 的基本概念
3 、 Vue Router 的配置项介绍
• routes 中的配置项介绍
4 、路由跳转
• 使用 `router-link` 组件
• 使用 `router.push` 函数
5 、路由传参
6 、动态路由
7 、嵌套路由
8 、命名路由
9 、路由守卫
• 全局路由守卫
• 路由独享守卫
10 、路由懒加载
• 使用 import() 方式实现懒加载
• 使用动态 import() 方式实现懒加载
11 、使用 Vue Router 的注意事项 |
| Axios |
style="padding-left:10px;"1 、安装和配置 Vue Router
• 安装 Vue Router
• 配置 Vue Router
2 、 Vue Router 的基本概念
3 、 Vue Router 的配置项介绍
• routes 中的配置项介绍
4 、路由跳转
• 使用 `router-link` 组件
• 使用 `router.push` 函数
5 、路由传参
6 、动态路由
7 、嵌套路由
8 、命名路由
9 、路由守卫
• 全局路由守卫
• 路由独享守卫
10 、路由懒加载
• 使用 import() 方式实现懒加载
• 使用动态 import() 方式实现懒加载
11 、使用 Vue Router 的注意事项 |
| Pinia-状态管理 |
1 、 Pinia 是什么
2 、 Pinia 的特性
3 、 Pinia 在 Vue3 中的使用
4 、如何在 Vue3 中使用 pinia 进行状态管理
5 、 pinia 状态管理的高级用法
• Getter/Setter 函数
• Actions 函数和异步支持
• Subscribe 函数订阅状态变化
• Pinia 持久化存储 |
| 0.5 天 |
ElementPlus |
1.ElementPlus UI 组件库
2.Container 布局容器
3.Layout 布局
4.Icon 图标
5.Button按钮
6.表单元素 input
7.select选择器以及级联选择器
8.时间日期选择器
9.Upload 文件 上传
10.Form表单基础以及基础验证
11.Form 自定义验证以及单个表单组件验证
12.Table 基础使用
Table 多选和自定义模板
14.Pagination分页
15.Tree 树形控件
16. Notice消息提示类别组件
17.NavMenu 导航菜单
18.Tabs标签页
19.Container布局容器
20.Layout 布局
21.Icon 图标 |
| 项目实战 |
1.Vue3+ElementPlus+Node前后端分离项目实战案例
2.Nginx 部署 |
