开工之前,先来看看我们到底要做一个什么项目,有哪些功能。然后站在上帝视角,从整体的架构层面,该如何设计该项目。
万丈高楼平地起,讲解大厂级别的脚手架是如何设计的,从头开始绘制架构设计图,并完成脚手架的框架搭建。
本周将完成脚手架内核@imooc-cli/core子项目设计,并开发脚手架的执行准备阶段和命令注册阶段。
本周将完成脚手架内核@imooc-cli/core子项目的执行命令阶段,我们将采用分离式架构设计、缓存结构设计大幅提升脚手架的下载速度和执行性能。
本周将开发脚手架创建项目的@imooc-cli/init子项目,完成init包的准备阶段和下载模板阶段开发。
init包将完成项目和组件的初始化过程,本周将完成init包的安装模板阶段。
对于一个复杂前端项目,在编码之前,分析过程可谓是“磨刀不误砍柴工”,本周我们来给大家讲解怎样一步步抽丝剥茧,从需求到难点,再到系统整体设计。
在课程正式开始之前,扎实的基础知识是本课程的必备条件。这一周,让我们一起来温习 - typescript,vue3,ant-desing-vue 以及 webpack 和 rollup 的基础知识。
万事开头难,本周我们使用技术储备中简介的知识,来搭建项目的大体结构和框架,包括 项目创建,代码结构,基础路由,基本布局和 基本的全局数据结构。
本周从编辑器开始开发,完成编辑器的基本布局,并且分析组件属性和修改组件属性的对应关系,创建业务组件库的第一个组件,并且完成最简单的编辑器交互,最后提出了业务组件实时实现编辑更新的解决方案。
本周从什么是测试入手,简介了测试的基本概念,介绍通用测试工具 Jest 和 Vue 测试框架 vue-test-utils,然后使用这两种工具完成LText组件的单元测试。
本周主要针对不同属性来完成对应编辑组件的开发,由易到难的开发了 IconSwitch,ColorPicker 和 通用上传组件,中间还穿插了 TDD 的开发方式。
本周继续丰富业务组件库的功能,将组件库剥离成单独的代码库,使用 rollup 打包成多种 JS 模块形式,发布到 NPM,最后还使用 travis 完成了 CI/CD 流程。
本周介绍做服务端必备的技能、框架、工具和服务,以及为何选择他们。 这些都是做服务端开发的基础知识,必须全部掌握,否则接下来开发会遇到很大障碍。
CI/CD 是软件开发的必备流程,它可以实现自动发布到测试机,自动部署测试环境。本周我们使用 github actions 和 docker 这两大利器,从 0 实现 CI/CD 流程。
本周正式开发业务开发。开发之前要做技术方案设计(接口设计,数据库设计),初始化项目环境和 CI/CD 流程。然后完成所有业务功能开发,同时进行单元测试和接口测试。
真正线上项目才需要这些功能,还要花钱购买第三方服务,一般课程不常见到。这些功能很实用,很大众,学完即可照搬到实际项目中。
本周继续进行属性编辑面板的功能,完成属性的分组功能,完成图层面板的显示 隐藏 锁定 排序等功能。最后完成背景设置面板的功能,在这个过程中,学习一系列第三方库的使用。
本周是集中火力在编辑器交互功能上,完成元素的拖动定位,拖动改变大小,快捷键支持,重做,回滚,右键菜单等一系列功能的开发。
本周开始接入后端开发,实现作品的预览,保存,自动保存,发布和渠道编辑等一系列功能。
完成了重头戏编辑器,这周来完成其他页面的分析和编码工作,从分析后端接口开始,完成一系列 Vue 应用的通用难点,包括鉴权,全局状态,业务开发 和 使用 Echarts 生成统计图表。
本周来到了大型项目必不可少的环节 - 性能优化。包括 vue 性能的常见优化方案,数据结构的优化以及 webpack 打包分析和优化实施方案的整个过程。
编辑器可以创建、保存和发布作品,但发布后的作品如何查看?本周就来搞定。我们不仅要把 H5 页渲染出来,考虑 H5 前端的各项工作,还要打包、发布静态文件到 OSS 。
自定义事件统计,是一个线上产品必备的统计功能。目前市面上没有合适的第三方服务,干脆我们就自研一个。包括收集日志、分析日志、Open API 功能。
一个完善的线上产品,后台管理是必备的模块。我们可以查看网站内容数据,管理用户、作品和模板,推荐优质内容,屏蔽垃圾数据。
既然是真实的线上产品,就需要购买各种云服务,配置服务器和数据库,然后正式发布到线上环境,一旦遇到问题还要能快速回滚。
一个完善的线上产品,必须有完善的运维体系,才能保证稳定运行。包括服务器监控,报警,以及网络安全预防。
完成项目开发后,需要进行前端发布,脚手架的@imooc-cli/publish子项目将完成项目和组件的标准发布流程,本周将完成publish包的架构设计和核心流程开发
本周将完成项目发布过程中的git flow流程开发,遵循标准的git flow流程,学会可快速改造和优化日常开发中的git处理流程,巩固git的各种使用技巧和方法。
git flow流程完成后,我们将进入脚手架中最重要也是难度最高的一个环节,即云构建系统开发,本周我们通过egg.js+WebSocket+Redis最终实现完成云构建模块开发。
脚手架云构建模块开发完成后,本周将继续完成项目的云发布流程开发。
项目发布流程已经调通,本周将完成组件发布流程开发,组件发布流程和项目不同,主要差异在于:组件需要发布到npm和组件信息需要落库,所以需要不同的处理方式。
本周将基于umi完成组件库前端部分创建,同时结合react hook开发组件库的前端页面,并将组件库发布上线。
讲解如何开发单元测试用例,并开发测试代码。
本周带领大家进入大厂文化 ,了解大厂如何做项目管理,多人协作的管理,以及团队人员的管理,课程内容复盘,未来技术的发展分析。
选课、学习遇到问题?
扫码添加指导老师 1V1 帮助你!
扫码加顾问老师 立即咨询