前端七天从0实现低代码平台|持续更新。。。

前端开发

课程简介

这门课解决什么问题从零搭建一个低代码平台，解决物料拖拽、嵌套排序、动态渲染和配置化编辑等核心工程问题。课程从需求分析出发，逐步实现MVP版本，最终构建出可交互的编辑器，让开发者能直接对照实践，而不是空看概念。内容覆盖拖拽交互、JSON Schema驱动渲染、monorepo工程化等关键模块，每一块都对应一个可复用的工程问题。适合什么基础有一定前端开发…

已有 13 人浏览发布 2026-03-01 更新 2026-10-11

这门课解决什么问题

从零搭建一个低代码平台，解决物料拖拽、嵌套排序、动态渲染和配置化编辑等核心工程问题。课程从需求分析出发，逐步实现MVP版本，最终构建出可交互的编辑器，让开发者能直接对照实践，而不是空看概念。内容覆盖拖拽交互、JSON Schema驱动渲染、monorepo工程化等关键模块，每一块都对应一个可复用的工程问题。

适合什么基础

有一定前端开发基础，熟悉React或Vue框架，了解项目结构、模块拆分和工程化实践。课程涉及monorepo等工具链，建议对现代前端工程化有一定了解，能跟随源码逐步理解架构设计。对拖拽库、状态管理和组件通信有基本认知的开发者能更快进入实战。

建议先看哪几块

建议按学习顺序优先阅读需求分析、MVP版本创建、拖拽库集成、嵌套拖拽处理、动态渲染组件和JSON Schema解析这几块。这些模块覆盖了低代码平台的核心逻辑，是后续理解架构和扩展功能的基础。其中嵌套拖拽防止重复嵌套和动态渲染组件原理是难点，需要重点跟进，建议边看边动手实现。

学完能独立做什么

学完能独立搭建一个具备物料拖拽、嵌套排序、动态渲染和配置化编辑能力的低代码平台原型，并理解其架构设计，为后续扩展业务功能提供工程参考。后续可在此基础上接入物料市场、数据绑定、版本管理等扩展模块，形成可落地的小型项目。

资料怎么配合练习

建议边看边动手，跟着代码实现关键模块。每完成一个阶段，尝试独立扩展功能或优化现有逻辑，通过实际搭建加深对架构和复用模块的理解。遇到卡点时回到源码和架构图定位问题，避免停留在表面实现，让学习过程始终与工程实践挂钩。

课程目录：

001.项目简介.mp4
003.MVP版本介绍、优点、注意点.mp4
004.MVP版本项目创建.mp4
005.MVP版本入门拖拽库.mp4
006.MVP版本拖拽排序测试.mp4
007.MVP版本多拖拽区测试.mp4
008.MVP版本嵌套拖拽测试.mp4
009.MVP版本嵌套拖拽如何防止再嵌套.mp4
010.MVP版本简单+多容器+嵌套融合.mp4
011.架构图解析 导航栏 物料区 渲染区 配置区 介绍.mp4
012.架构图解析 动态渲染组件原理解析.mp4
013.架构图解析 JSON Schema介绍.mp4
014.架构图解析 JSON Schema介绍（二）.mp4
015.架构图解析 JSON Schema渲染逻辑介绍.mp4
016.架构图完整解析.mp4
018.组件库打包技术选型.mp4
019.ESModule銆丆ommonjs銆乁MD.mp4
021.package.json 介绍及用到的字段.mp4
022.Vue组件编写.mp4
023.Vue2 Vue3 兼容组件依赖库介绍.mp4
024.渚濊禆搴撳垵璇昖ue2 Vue3 demo.mp4
025.跨版本库原理解析.mp4
032.Vue2项目引入组件样式.mp4
033.Vue3项目引入组件样式.mp4
034.渲染区样式污染介绍和规避方式及原理.mp4
035.iframe浠嬬粛鍙婇€氳.mp4
036.iframe在此项目实现渲染优缺点分析.mp4
037.原生引入介绍及优缺点分析.mp4
038.响应式设计和媒体查询介绍.mp4
039.平台项目搭建.mp4
040.浠ｇ爜瑙勮寖 eslint prettier.mp4
041.git规范.mp4
044.sass介绍及项目涉及知识点.mp4
046.tailwindcss的介绍和引用.mp4
047.测试tailwindcss Mobile端PC端组件样式.mp4
048.Mobile端PC端组件样式兼容.mp4
049.Mobile端PC端组件样式兼容封装（一）.mp4
050.Mobile端PC端组件样式兼容封装（二）.mp4
051.整体结构+导航栏.mp4
053.TypeScript绠€鍗曚粙缁嶏紙浜岋級.mp4
054.TypeScript在Vue中的常用用法.mp4
055.软件设计原则.mp4
056.开发拖拽 物料区 容器.mp4
057.开发拖拽 物料区 组件列表渲染.mp4
058.开发拖拽 物料区 组件列表渲染（二）.mp4
059.开发拖拽 物料区 组件列表渲染（三）.mp4
060.开发拖拽 物料区 组件列表渲染（四）.mp4
061.组件库watch模式.mp4
062.开发拖拽 渲染区 简单拖拽.mp4
063.开发拖拽 渲染区 简单拖拽（二）.mp4
064.开发图片组件.mp4
065.开发图片组件（二）.mp4
066.开发图片组件（三）.mp4
067.开发图片组件测试用例.mp4
068.开发图片组件测试用例（二）.mp4
069.开发多列组件.mp4
070.多列组件子项Schema开发及解析.mp4
071.开发拖拽 渲染区 嵌套拖拽.mp4
072.开发拖拽 配置区 容器.mp4
073.开发拖拽 配置区 组件 输入框.mp4
074.开发拖拽 配置区 组件 配置解析.mp4
075.开发拖拽 配置区 组件 配置解析（二）.mp4
076.开发拖拽 多端切换.mp4
077.开发拖拽 配置区 组件 简易版图片选择.mp4
078.开发拖拽 配置区 页面容器.mp4
079.开发拖拽 配置区 组件 列数选择.mp4
080.开发拖拽 配置区 组件 视口切换.mp4
081.渲染区悬浮操作栏.mp4
082.input表单验证发展历史过程.mp4
083.element-plus闆嗘垚楠岃瘉.mp4
084.自定义组件如何参与element-plus集成验证.mp4
085.ajv验证介绍 添加验证规则.mp4
086.表单校验schema设计 如何将ajv和element-pl.mp4
090.服务端 预览访问 代码热更新 跨域.mp4
091.数据库 MySQL 介绍 安装.mp4
092.数据库 创建 和 语句 介绍.mp4
093.数据库 Node连接库.mp4
095.三层架构 Controller层 DAO层.mp4
096.一般接口命名规范.mp4
097.濡備綍鏍囧噯鍖朢esponse.mp4
098.全局级别的错误中间件.mp4
099.封装页面分页查询.mp4
100.封装页面分页查询（二）.mp4
101.MySQL 分页数据错乱.mp4
103.封装页面通过id查询.mp4
105.封装页面插入更新删除数据.mp4
106.用户注册.mp4
108.用户登录.mp4
109.用户管理.mp4
110.权限管理.mp4
111.权限管理（二）.mp4
112.套件管理.mp4
114.操作日志.mp4
115.阿里云OSS 文件上传.mp4
116.阿里云OSS 文件上传（二）.mp4
117.axios的封装.mp4
118.注册页及联调.mp4
119.登录页及联调.mp4

课程目录

001.项目简介.mp4
003.MVP版本介绍、优点、注意点.mp4
004.MVP版本项目创建.mp4
005.MVP版本入门拖拽库.mp4
006.MVP版本拖拽排序测试.mp4
007.MVP版本多拖拽区测试.mp4
008.MVP版本嵌套拖拽测试.mp4
009.MVP版本嵌套拖拽如何防止再嵌套.mp4
010.MVP版本简单+多容器+嵌套融合.mp4
011.架构图解析 导航栏 物料区 渲染区 配置区 介绍.mp4
012.架构图解析 动态渲染组件原理解析.mp4
013.架构图解析 JSON Schema介绍.mp4
014.架构图解析 JSON Schema介绍（二）.mp4
015.架构图解析 JSON Schema渲染逻辑介绍.mp4
016.架构图完整解析.mp4
018.组件库打包技术选型.mp4
019.ESModule銆丆ommonjs銆乁MD.mp4
021.package.json 介绍及用到的字段.mp4
022.Vue缁勪欢缂栧啓.mp4
023.Vue2 Vue3 兼容组件依赖库介绍.mp4
024.渚濊禆搴撳垵璇昖ue2 Vue3 demo.mp4
025.跨版本库原理解析.mp4
032.Vue2项目引入组件样式.mp4
033.Vue3项目引入组件样式.mp4
034.渲染区样式污染介绍和规避方式及原理.mp4
035.iframe浠嬬粛鍙婇€氳.mp4
036.iframe在此项目实现渲染优缺点分析.mp4
037.原生引入介绍及优缺点分析.mp4
038.响应式设计和媒体查询介绍.mp4
039.平台项目搭建.mp4
040.浠ｇ爜瑙勮寖 eslint prettier.mp4
044.sass介绍及项目涉及知识点.mp4
046.tailwindcss的介绍和引用.mp4
047.测试tailwindcss Mobile端PC端组件样式.mp4
048.Mobile端PC端组件样式兼容.mp4
049.Mobile端PC端组件样式兼容封装（一）.mp4
050.Mobile端PC端组件样式兼容封装（二）.mp4
051.整体结构+导航栏.mp4
053.TypeScript绠€鍗曚粙缁嶏紙浜岋級.mp4
054.TypeScript在Vue中的常用用法.mp4
055.软件设计原则.mp4
056.开发拖拽 物料区 容器.mp4
057.开发拖拽 物料区 组件列表渲染.mp4
058.开发拖拽 物料区 组件列表渲染（二）.mp4
059.开发拖拽 物料区 组件列表渲染（三）.mp4
060.开发拖拽 物料区 组件列表渲染（四）.mp4
061.组件库watch模式.mp4
062.开发拖拽 渲染区 简单拖拽.mp4
063.开发拖拽 渲染区 简单拖拽（二）.mp4
064.开发图片组件.mp4
065.开发图片组件（二）.mp4
066.开发图片组件（三）.mp4
067.开发图片组件测试用例.mp4
068.开发图片组件测试用例（二）.mp4
069.开发多列组件.mp4
070.多列组件子项Schema开发及解析.mp4
071.开发拖拽 渲染区 嵌套拖拽.mp4
072.开发拖拽 配置区 容器.mp4
073.开发拖拽 配置区 组件 输入框.mp4
074.开发拖拽 配置区 组件 配置解析.mp4
075.开发拖拽 配置区 组件 配置解析（二）.mp4
076.开发拖拽 多端切换.mp4
077.开发拖拽 配置区 组件 简易版图片选择.mp4
078.开发拖拽 配置区 页面容器.mp4
079.开发拖拽 配置区 组件 列数选择.mp4
080.开发拖拽 配置区 组件 视口切换.mp4
081.渲染区悬浮操作栏.mp4
082.input表单验证发展历史过程.mp4
083.element-plus闆嗘垚楠岃瘉.mp4
084.自定义组件如何参与element-plus集成验证.mp4
085.ajv验证介绍 添加验证规则.mp4
086.表单校验schema设计 如何将ajv和element-pl.mp4
090.服务端 预览访问 代码热更新 跨域.mp4
091.数据库 MySQL 介绍 安装.mp4
092.数据库 创建 和 语句 介绍.mp4
093.数据库 Node连接库.mp4
095.三层架构 Controller层 DAO层.mp4
096.一般接口命名规范.mp4
097.濡備綍鏍囧噯鍖朢esponse.mp4
098.全局级别的错误中间件.mp4
099.封装页面分页查询.mp4
100.封装页面分页查询（二）.mp4
101.MySQL 分页数据错乱.mp4
103.封装页面通过id查询.mp4
105.封装页面插入更新删除数据.mp4
106.用户注册.mp4
108.用户登录.mp4
109.用户管理.mp4
110.权限管理.mp4
111.权限管理（二）.mp4
112.套件管理.mp4
114.操作日志.mp4
115.阿里云OSS 文件上传.mp4
116.阿里云OSS 文件上传（二）.mp4
118.注册页及联调.mp4
119.登录页及联调.mp4