云原生之前端开发框架实战合集
体系课

云原生之前端开发框架实战合集

  • Vue.Js
  • HTML与CSS
  • JavaScript
  • Docker
  • K8S
  • DevOps

前端框架开发的保姆级教程

¥999.9
本课程包括
  • 23小时38分钟的视频随时观看
  • 可在APP随时观看
  • 结业证书
你将收获
  • 掌握Vue、Vite、Pinia等开发技术在云原生环境中的运用
  • 从零开始学习HTML、CSS编写网页到运用框架进行网站开发
  • 构建高效、可扩展的Web应用,并能够进行云原生部署和管理
  • 提升在前端开发领域的实战经验和技能,为未来的职业发展做好准备

数千家企业正在使用三节课企业版学习

无限制学习2000+门课程,200+精选学习专题

免费申请体验>
课程介绍

随着云计算的普及和前端技术的快速发展,云原生前端开发已成为行业中的热门话题。本课程将深入浅出地讲解云原生前端开发的核心概念、框架和技术,通过实战案例,帮助学员掌握现代前端开发的最佳实践。

为此,三节课邀请了具有丰富开发与运维经验的杜宽老师,旨在通过实际操作结合讲授知识,为您提供体系化的前端开发知识课,真正实现从入门到实践。

本课程将从HTML+CSS网站前端开发基础技术语言开始,深入细讲运用Vue框架和Vite、Pinia进行脚手架项目的开发,以及它们在云原生环境中的运用。学员将学习如何使用这些框架构建高效、可扩展的Web应用,并理解如何利用云原生基础设施进行部署和管理。同时,课程还将介绍微服务架构、容器化技术(如Docker和Kubernetes)以及持续集成/持续部署(CI/CD)等现代软件开发和部署的最佳实践。

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

课程有效期:

自购买课程之日起 365 天,部分参与营销活动产品以活动规则为准,请同学在有效期内学习、观看课程。

上课模式:

课程采取录播模式,请注意自学课无班级微信群、班主任带班及助教批改服务。

注:自学课不支持退款,确保你是真的需要再进行报名,报完名之后还请认真学习。