Vue 3 企业级项目实战课

Vue 3 企业级项目实战课 / 进阶高手的 Vue 3+Node.js 全栈开发训练

杨文坚 前阿里前端 Leader,前腾讯 IMWeb 团队高级前端工程师
  • 课程目录
  • 课程介绍
  • 在线阅读:开篇词|为何掌握了技术API,依然在项目中处处掣肘?

    在实际的企业级项目中,单纯依赖Vue.js的API技术知识是远远不够的,你需要的是一整套围绕Vue.js建设项目的技术知识储备体系。

  • 01|编译和非编译模式:离开Vue工具,你还知道怎么用Vue 3吗?

    Vue.js3脱离了构建工具,要如何进行开发和在浏览器中运行呢?

  • 02|Webpack编译搭建:如何用Webpack初构建Vue 3项目?

    这节课,我们重点来看看企业级项目是怎么做编译配置的。

  • 03|从Rollup到Vite:如何用Vite构建你的Vue 3项目?

    这一讲,我们就来尝试一下如何用Vite来搭建Vue.js 3项目。

  • 04|模版语法和JSX语法:你知道Vue可以用JSX写吗?

    在实际团队的项目开发中,要选择某种技术或者某种技术模式,不仅仅要考虑技术优缺点,还要考虑人员的能力程度,综合考虑选择出高效率的技术方案。

  • 05|响应式开发操作:如何理解和使用Vue 3的响应式数据?

    在使用Vue.js 3的响应式API时候,要注意响应式的作用范围以及官方对个别API的“慎用提醒”,一般我们开发过程中尽可能做到“最小可用”原则就好。

  • 06|跨组件数据通信:常见的组件间数据通信方式有哪些?

    Vue.js3的组件间数据通信的三个方式:基于Props+Emits的组件数据通信、基于公共响应式数据文件进行通信、基于Pinia的公共数据状态管理。

  • 07|项目代码规范:如何成为一名合格的团队协作工程师?

    做项目代码规范,不是为了规范而规范,核心是要提升代码质量,开发项目时,让团队合作更加顺利,让代码可读性更强,让项目维护成本更低,让项目的潜在代码问题变得更少。

  • 加餐|基础篇思考题答疑

    基础篇答疑来了

  • 08|如何从零搭建自研的Vue组件库?

    大厂内部实现组件库或者开源社区实现组件库的主流技术方案:用monorepo管理多种类型组件库、源码要编译成多种模块格式、基于Less等预处理CSS语言来开发组件库的样式。

  • 09|主题方案和基础组件:如何设计组件库的主题方案?

    Vue.js 3.x自研组件库的主题方案设计,结合主题方案开发一个基础组件。

  • 10|动态渲染组件:如何实现Vue的动态渲染组件?

    设计动态渲染组件的使用函数方法的API,越简洁越好,核心是要控制组件渲染的挂载和卸载的生命周期.

  • 11|布局组件:如何实现自研组件库的布局方案?

    一开始“约定好布局规范”,根据规范,用组件方式“搭建好布局骨架”,开发时就在“布局骨架”里填充需要的功能代码。

  • 12|受控表单组件:如何开发受控的表单组件?

    如何在Vue.js 自研组件库场景下实现“受控表单组件”。

  • 13|动态表单组件:怎么优雅地动态渲染表单?

    什么是动态表单,以及如何基于Vue.js 3.x开发自研组件库里的动态表单组件。

  • 14|代码单元测试:如何轻松地保证自己的代码质量?

    基于Vitest,实现Vue.js 3.x组件库的单元测试。

  • 加餐|进阶篇思考题答疑

    进阶篇复习与思考题答疑

  • 围炉夜话|学了新技术,在公司用不上怎么办?

    公司用的技术栈比较老,学了新的技术在公司也无用武之地,你怎么看?

  • 围炉夜话|Leader 眼里最有潜力的仔长什么样?

    对 Leader 来说,优秀的员⼯应该是怎么样的?对员⼯来说,优秀的 Leader 应该是怎么样的?

  • 围炉夜话|你的职业起点和职业终点是什么?

    我们聊一聊职业规划的事,正好年底也适合做一做今年复盘和规划,你可以想想怎么度过自己的职业生涯。

  • 15|定制运营拖拽组件:如何实现运营搭建页面的拖拽功能?

    基于原生JavaScript API来实现拖拽布局功能,核心就是要定义“父容器”来承载和限制拖拽的范围,定义“子容器”来控制拖拽操作。

  • 16|单页面应用:如何理解和实现单页面应用开发?

    希望你充分明白单页面路由的技术原理,理解API背后是如何运行的,而不只是停留在vue-router的API使用。

  • 17|Koa.js:如何结合Koa.js开发Node.js Web服务?

    前后端项目分离的理念要从具体的需求场景来分析,要从“技术”“管理”和“行情”这三个视角看待,不能脱离实际环境,一昧讨论技术理念的利弊优劣。

  • 18|Node.js服务端渲染页面:客户端渲染和服务端渲染有何区别?

    如何定制Vue.js全栈项目的SSR和CSR结合方案,核心要考虑项目的前后端耦合或者解构的情况,同时还要考虑到国内大厂的前后端分离的技术趋势。

  • 19|全栈项目搭建:如何搭建Vue.js的前后台全栈项目?

    全栈项目的搭建是没有标准答案的,都是根据实际项目情况因地制宜做方案设计的。

  • 20|数据库方案设计:如何设计运营搭建平台的数据库?

    数据库的设计范式,就是为了让数据的关系清晰,结构精简和减少冗余。不过,实际项目的数据库设计,与范式之间会有一些矛盾。

  • 21|用户注册和登录:如何结合Vue 3和Koa.js实现注册登录?

    在全栈项目的常规开发流程中,第一步设计功能逻辑,不一定是程序员的职责,但是程序员必须要掌握第一步的功能逻辑的设计能力,有了这个能力,你可以突破技术职责的边界,锻炼出独当一面的项目管理软实力。

  • 22|物料组件的编译和管理:如何处理组件的多种模块格式?

    浏览器端把握在用户手里,我们无法预测实际代码在运行过程中会出现什么兼容问题,如果平台渲染能支持多重模块格式,就意味着可以做一些优化策略,在低版本浏览器中,就可以优先选择对应能支持的模块格式。

  • 23|运营物料的后台管理:如何全栈化实现列表分页的功能?

    如何从前端到服务端,全栈化地实现列表分页的功能,这也是企业工作中,常见的功能需求点。可以分为两个部分来实现,前端部分、服务端部分。

  • 加餐|实战篇思考题答疑(上)

    实战篇思考题答疑

  • 24|后台搭建数据源:如何设计运营搭建页面的数据结构?

    物料数据源(也就是页面数据结构)的设计与实现,我们主要学习三个要点“物料数据源”“JSON Schema”和“物料预览功能的实现”。

  • 25|后台搭建功能:如何设计和实现Vue.js运营后台的搭建功能?

    页面搭建流程主要分成两个部分,第一是要先做布局设计,第二是填充物料到布局中。所以页面搭建是围绕着“操作布局”和“填充物料”来进行的。

  • 26|页面编译和运行:如何设计Vue.js搭建页面的渲染策略?

    页面编译,基于页面布局数据,动态编译出页面完整的JavaScript和CSS的Bundle文件,减少HTTP文件请求,提升用户体验。页面运行,核心就是要设计页面的渲染策略,保证页面功能的可用性和稳定性。

  • 27|后台发布流程:如何实现Vue.js搭建页面的发布流程?

    任何有着生产规范的企业,发布流程都是基于三个流程节点,开发测试节点、预发布节点、生产节点,执行或者扩展,以实现安全和稳定的生产规范,毕竟规范就是用来限制行为的,尽量避免操作者错误的生产行为。

  • 28|前台页面版本化管理:如何实现搭建页面的迭代策略?

    从“高可用”的概念开始,学习什么是高可用,以及如何基于页面回滚措施,提升运营搭建平台页面的可用性。

  • 29|前台页面的渲染方式:如何设计前台页面的渲染策略?

    技术的成长,就是要依靠长期的“技术储备”和“技术实践”。当你遇到任何技术问题,都能想到使用以前学过的“技术点”,并且比以前更加得心应手地设计技术方案,实现技术功能。那么恭喜你,你的技术已经得到成长了。

  • 30|前台页面的性能优化:如何实现前台页面的性能优化?

    在Vue.js主题中,做前端性能优化有两个要点:优化逻辑能独立插件化、尽可能少修改存量代码。核心就是尽量让优化逻辑能独立化,减少对原有项目的干扰。

  • 31|前台页面的日志监控:如何进行页面实时监控与问题定位?

    日志技术是一种技术概念,没有限定技术的实现方式,只要能实现记录和存储日志数据,就可以看做日志功能的实现技术。

  • 加餐|实战篇思考题答疑(下)

    实战篇思考题答疑

  • 32|单元测试:如何打造Vue.js和Node.js全栈项目的单元测试?

    测试是为了保障代码质量,用什么框架工具都不是重点。真正的重点是如何根据个人或者团队的情况,设计低成本、高性价比的测试设计方案,基于设计方案,选择趁手或者熟悉的技术工具。

  • 33|页面功能扩展:如何对Vue.js全栈项目做优雅扩展?

    没有万能通用的扩展方式,不同业务有不同需求,不同技术有不同特性,很难整合设计出“全兼容扩展”的技术框架。实际工作中,我们都要“因地制宜”设计项目的扩展能力。

  • 34|服务端功能扩展:如何对Vue.js全栈项目做服务端功能扩展?

    作为前端程序员,我们要学会思考如何设计或解构一个全栈服务,并且化整为零地分析处理,逐渐沉淀自己对全栈项目的功能组合的认知,构建属于自己的全栈化知识体系。

  • 35|多进程部署:如何最大限度利用服务器资源运行Node.js服务?

    性能问题,根本原因可以归纳成两种,代码逻辑不合理,导致大量CPU密集计算直接运行;机器资源利用不合理,单线程单进程执行代码,没充分利用机器资源。

  • 36|日志收集与问题排错:如何守护好Vue.js和Node.js的全栈项目?

    实际工作中,服务端运维不需要你有很专业的知识,只要能从实用主义视角出发,解决日常问题、保持服务稳定运行,面对绝大部分系统问题,能做到“兵来将挡,水来土掩”就可以了。

  • 加餐|增强篇思考题答疑

    增强篇思考题答疑

  • 结束语|时刻做好“军备竞赛”,机会只留给有准备的人

    祝愿你在今后的工作学习中,顺利跳出“瓶颈期”的“山重水复”,逢山开路,遇水搭桥,直达新世界的“柳暗花明”。

  • 期末测试|来赴一场满分之约!

    来赴一场满分之约

47讲

【上新特惠 | 限时 7 折】


你将获得

  • 从 0 到 1 实现一个运营搭建平台
  • 掌握 Webpack、Rollup、Vite 三大前端构建工具
  • 洞悉可视化搭建、全栈开发等最新前端技术应用
  • 贯穿前端、服务端和技术运维的全局视野

讲师介绍

作为前端 Leader,杨文坚老师对前端程序员的成长进阶具有深入了解。在阿里的 5 年管理工作中,培养了 4 名 P7 工程师。教学经验丰富的他,也曾辅导过近 40 名学员进入 BAT、字节、拼多多、Shopee 等一线大厂。


课程介绍

每每遇到新技术,或者遇到技术的重大升级,你是不是也会苦恼,虽然自己都能基于官方文档,快速上手新技术,但就是不知道如何将它运用到实际项目中,也不清楚还有哪些用途。反观大厂的同学,似乎就要如鱼得水很多。

其实这无关个人能力,更多是因为你缺少大厂的项目机会和压力,导致面对具体项目时,很难快速发现问题,“对症下药”,更不知道如何设计合适的技术方案。比如:

  • 在前端性能监控项目中,陷入前端性能就是浏览器问题的误区,不懂监控 HTTP 加载资源或者数据 API 导致的性能问题;

  • 在微前端项目中,缺乏 JavaScript 全局变量和 CSS 样式的隔离实践经验,导致应用融合的 JavaScript 全局变量污染和 CSS 样式污染的问题;

  • 在前端自研组件库开发过程中,缺乏全局的主题设计思路,导致所有组件的 CSS 样式无法变更主题和扩展主题等等。

为此,我们请来了前阿里前端 Leader,前腾讯 IMWeb 团队高级前端工程师杨文坚老师。他会结合自己多年的大厂项目经历和丰富的技术培训经验,以热门的 Vue 3 框架为基石,带你从 0 到 1 完成一个企业级的全栈项目。

在此期间,你会亲身实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景,沉浸式体验大厂开发项目的全过程,从中构建自己的前端技术体系。

课程设计

整个专栏分为 4 个模块。

基础篇:换个视角,从“实用主义”重新入门 Vue 3

列举大厂中常见的项目需求,比如如何在浏览器里动态组装 Vue 3 组件,如何用 Webpack、Rollup 构建你的 Vue 3项目等,针对具体问题“对症下药”,让你的 Vue 3 基础变得更加“实用”。

进阶篇:沉淀方案,循序渐进地打造自己的技术知识储备

学习大厂里企业级项目常用的技术知识,包括 Vue.js 的生态知识和前端领域的相关技术概念,并将技术概念转换成具体场景,告诉你如何从基础组件开始,到动态渲染组件、布局组件等,一步步地完成自研组件库的搭建。

实战篇:因地制宜设计技术方案和实现技术功能

化整为零,将一个企业级项目分解成一个个简单易懂的技术知识点,并选用合适的实现方式。同时,优雅地解决 Node.js 服务端渲染、全栈项目搭建、数据库方案设计、前台搭建等实际的项目问题。

增强篇:打破边界,解锁前端以外的技能

深入 Node.js 服务端领域,了解如何打造一个稳定的 Node.js 服务生态,贯穿理解前端开发、服务端开发和技术运维的内容,带你逐步掌握大厂程序员的技术“硬实力”和应对突发问题的“软实力”。


课程目录


适合人群

  1. 1~3 年前端开发者、Vue 初级开发者;
  2. 有前端开发经验,但是无 Vue.js 企业级项目经验的人群;
  3. 无前端经验,但是想快速上手前端开发的人群。

订阅须知

随机推荐

和府捞面浓汤鲜煮面4袋速食面番茄牛肉面条选购技巧有哪些?体验...

SANWA SUPPLYMA-ERG9用户体验如何?深度剖析评测结果?

狮王小狮王儿童氟防蛀牙膏 20g用户体验如何?小白买前必看评测?

雀巢超启能恩奶粉3段760g*4罐选购技巧有哪些?全方位评测分享!

卡诗元气姜粉瓶生姜洗发水250ml分析怎么样?使用体验!

滋源 无患子控油洗头水 200ml使用体验怎么样?来看看买家评测!