一、网站开发工具的安装 - 1、VSCode的安装 - 2、VSCode集成前端开发工具包 二、网站开发HTML入门与实践 - 1、认识HTML - 2、HTML5基本结构 - 3、HTML初体验 - 4、HTML文本标签 - 5、HTML有序和无序列表 - 6、HTML描述列表 - 7、HTML表格使用 - 8、HTML超链接 - 9、HTML超链接特殊用法 - 10、HTML图片标签 - 11、HTML表单及input标签属性 - 12、HTML容器标签div - 13、CSS初识 - 14、CSS颜色和大小设置 - 15、CSS位置和内外边距设置 - 16、CSS边框设置 - 17、CSS背景设置 - 18、CSS内部外部样式表 - 19、CSS类选择器 - 20、CSS其他常用选择器 - 21、CSS网页布局display - 22、CSS网页布局flex - 23、CSS布局属性flex的排列与对齐 三、网站开发JavaScript入门与实践 - 1、什么是JavaScript - 2、JavaScript初体验 - 3、JavaScript操作window - 4、JavaScript操作DOM - 5、JavaScript修改网页样式 - 6、JavaScript实现元素的显示和隐藏 - 7、JavaScript常用数据类型 - 8、JavaScript定义变量和类型判断 - 9、JavaScript对象和数组操作 - 10、JavaScript数学运算符 - 11、JavaScript比较与逻辑运算符 - 12、JavaScript流程控制if-else与switch - 13、JavaScript循环for while forEach - 14、JavaScript定义函数 四、项目开发实战——Vue3基础 - 1、什么是Vue - 2、Vue初体验-实现计数器 - 3、Vue应用程序原理 - 4、Vue3和Vue2语法区别 - 5、Vue Vite项目工程化 - 6、Vue工程化项目详解 - 7、Vue setup ref 和reactive区别 - 8、Vue定义只读数据 - 9、Vue指令v-on - 10、Vue指令v-model - 11、Vue指令v-model修饰符 - 12、Vue指令v-show - 13、Vue指令v-if-else - 14、Vue指令v-for - 15、Vue computed和methods区别 - 16、Vue使用watch监听数据变化 - 17、Vue监听多个数据 - 18、Vue监听对象变化 - 19、Vue键盘修饰符 - 20、Vue鼠标修饰符 五、项目开发实战——Vue3进阶 - 1、什么是Vue组件 - 2、Vue自定义组件初体验 - 3、Vue组件传值defineProps - 4、Vue组件传值可选配置 - 5、Vue组件自定义校验 - 6、Vue单向数据流 - 7、Vue组件emit事件定义及传递参数 - 8、Vue插槽Slot介绍与使用 - 9、Vue具名插槽-命名插槽 - 10、Vue共享数据的发布和订阅 - 11、Vue Provide和lnject发布和订阅数据 - 12、Vue发布函数修改provide的数据 - 13、Vue发布只读数据 - 14、Vue生命周期了解 - 15、Vue生命周期钩子函数使用 六、项目开发实战——Vue3高级 - 1、什么是状态管理器Pinia - 2、Vue状态管理基本使用 - 3、Vue状态管理全局数据修改 - 4、Vue路由管理vue router介绍 - 5、Vue Router Hash和History模式区别 - 6、Vue Router Vite初体验 - 7、Vue Router push和replace - 8、Vue Router动态路由 - 9、Vue Router通过js跳转路由 - 10、Vue Router路由调整传递参数 - 11、Vue Router useRouter和useRoute - 12、Vue Router路由懒加载 - 13、Vue Router路由嵌套 - 14、Vue Router路由全局守卫 - 15、Vue Router路由独享守卫 - 16、Axios后端接口调用介绍 - 17、Axios初体验-发送Get请求 - 18、Axios添加请求参数 - 19、Axios请求数据双向绑定 - 20、Axios使用请求配置调用接口 - 21、Axios创建和发送post类型的请求 - 22、Axios接口超时配置 - 23、Axios自定义请求头 - 24、Axios定义全局配置 - 25、Axios拦截器介绍 - 26、Axios请求拦截器 - 27、Axios响应拦截器 - 28、Axios接口封装 - 29、Axios接口封装测试 七、前端脚手架项目开发 - 1、脚手架项目及ElementPlus演示 - 2、脚手架项目基本配置-使用Git管理 - 3、登录页-路由及登录框实现 - 4、登录页-实现用户名密码和登录按钮 - 5、登录页-实现输入框清空和密码显示功能 - 6、登录页-实现用户登录输入校验 - 7、登录页-根据校验结果设置登录的禁用状态 - 8、登录逻辑-实现登录调用后台接口 - 9、登录逻辑-接口地址和接口方法的封装 - 10、登录逻辑-实现JWT Token的存储 - 11、登录逻辑-实现请求头添加认证Token - 12、登录逻辑-判断登录状态是否已失效 - 13、登录逻辑-实现首页路由和登录后自动跳转 - 14、登录逻辑-实现页面未登录的请求拦截 - 15、登录框样式调整 - 16、Layout-实现layout的拆分 - 17、Layout-实现网页的标准布居 - 18、Layout-Aside Logo信息展示设计 - 19、Layout-Logo点击跳转及样式修复 - 20、Layout-Aside菜单实现 - 21、Layout-自动生成菜单配置梳理 - 22、Layout-实现菜单的自动生成 - 23、Layout-使用iconfont定义菜单图标 - 24、用户管理-实现用户管理的路由映射 - 25、用户管理-实现菜单根据路由默认激活 - 26、用户管理-el-table使用详情介绍 - 27、用户管理-获取后端数据并展示 - 28、用户管理-自动获取用户列表及加载效果 - 29、用户管理-实现删除功能和删除确认 - 30、用户管理-添加用户弹窗功能实现 - 31、用户管理-添加用户页面组件实现 - 32、用户管理-表单一键清空功能实现 - 33、用户管理-实现表单提交功能 - 34、用户管理-实现表单的验证 - 35、用户管理-实现删除后自动更新数据 - 36、用户管理-实现添加数据后自动刷新列表 - 37、用户管理-实现关闭弹窗自动刷新列表 - 38、用户管理-实现编辑功能的组件 - 39、用户管理-实现编辑功能接口调用及自动刷新 - 40、用户管理-解决form表单无法清空的问题 - 41、Header-实现Header功能的布局 - 42、Header-实现用户退出的功能 - 43、Header-使用pinia管理菜单的折叠状态 - 44、Header-实现Aside的折叠功能 - 45、Header-解决折叠卡顿的问题 八、项目上线 - 1、Vue多环境配置-不同环境不同配置 - 2、前端代码部署上线流程 - 3、使用Docker容器部署前端Vue代码 - 4、使用K8s部署Vue前端代码 - 5、脚手架项目总结