「造轮子」这个词容易让人误会：好像只是重复劳动。但在 Vue 组件开发这条线上，自己动手写一套 UI 框架，解决的是另一个问题——你天天用 Element Plus、Ant Design Vue、Vant，遇到样式覆盖不了、交互不合业务、组件行为和你预期不一致的时候，能不能看懂它内部怎么运作，能不能自己补一个组件出来。这门课针对的就是这个场景。

它到底在训练什么能力

课程的主线是把一套 Vue UI 框架从零搭起来，分初级、进阶、高级三个阶段推进。初级部分处理的是组件的基本形态：怎么设计组件的对外接口、props 和事件怎么约定、样式如何组织才不至于互相污染。进阶部分会碰到更贴近真实项目的问题：组件之间的组合与嵌套、插槽的灵活用法、表单类组件的双向绑定与校验、弹层类组件的挂载与层级管理。高级部分则转向框架层面的考量，比如主题与样式的可配置、组件的按需引入、以及在多人协作下如何保持 API 的一致性。

换句话说，它不是教你「再用一遍某个现成组件库」，而是让你具备在组件库不够用时自己动手的能力。这个能力在中小团队尤其值钱——业务变化快，通用库跟不上，能自己写组件的人往往就是那个能把需求落地的人。

学完之后能独立做什么

  • 针对具体业务场景，设计并实现一个可复用的 Vue 组件，而不是把逻辑散落在页面里；
  • 读懂主流 Vue UI 库的源码结构和设计思路，遇到问题能定位到是用法问题还是库本身的边界；
  • 搭一套属于自己项目的基础组件层，统一交互和样式规范，减少重复代码；
  • 在面试或技术评审中，把「组件化」从口号讲成具体的设计取舍。

适合什么基础的人

这门课不是零基础入门。你需要已经会写 Vue 组件，理解组件的基本写法、父子通信、生命周期这些概念，最好在真实项目里用过至少一个 UI 组件库。如果你目前还停留在「照着文档把组件拼到页面上」的阶段，建议先把 Vue 基础打牢再来看，否则进阶和高级部分会跟不上节奏。

反过来，如果你已经工作一两年，日常写业务没问题，但一遇到要封装组件、要改组件库行为就觉得吃力，那这门课的匹配度就很高。转行者如果已经系统学过 Vue，也可以用这套内容来补组件化这块短板，它比零散看几篇组件封装文章要成体系得多。

资料怎么用更划算

三个阶段是递进关系，不建议跳着看。初级部分即使你觉得简单，也尽量跟着写一遍，因为后面进阶、高级的很多设计是建立在初级那套约定之上的。每看完一个阶段的组件实现，最好回到自己手头的项目里找一个类似场景动手复现一次——造轮子的价值不在于跟着敲完，而在于你能把同样的思路迁移到自己的业务组件上。

如果时间有限，优先保证进阶部分吃透。那一块是组件开发中最常踩坑、也最能拉开水平差距的地方。高级部分涉及框架层面的设计，可以作为长期目标，先理解思路，等实际项目有对应需求时再回头细看。

最后提醒一点：造轮子的目的是理解原理、解决具体问题，不是鼓励你在每个项目里都从零重写一套组件库。学完之后，什么该用现成的、什么该自己写，这个判断力本身也是课程想让你获得的东西。

课程目录

Vue UI 框架-初级版 Vue UI 框架-进阶版 视频 07.单元测试与Mock 0203 0204 0205 0206 0207 0303 0304 0305 0403 0404 0405 0406.添加loading 0505 0506 0507 0508 0509 0602 0603 0604 0605 0606 0607 0702 0703 0704 0705 0706 0707 0708 0802 0803 0804 0805 0806 0902 0903 0904 0905 0906 0907 0908 0909 0910 0911 0912 0913 0914 1002 1003 1004 1005 1006 1007 1008 1009 1103 1104 1105 1106 1107 1108 1109 1110 1111 1112 1113 1114 1115 1116 1202 1203 1204 1205 1206 1207 1208 12

09 资料 01.测一测你的JavaScript、Vue基础 01.课程简介.md 02.课程介绍 01.课程简介.md 02.讲义.md 08.Vue造轮子第一课习题.md 08.Vue造轮子第一课习题[答案].md 09.关于轮子的面试题.md 03.体验、交互、sketch 01.课程简介.md 06.UI测试题.md 06.UI测试题[答案].md 04.框架雏形、单元测试、Mock数据 01.课程简介.md 05.单元测试、自动化测试、持续集成、NPM 发布包 01.课程简介.md 06.测试覆盖率 01.课程简介.md 07.升级的 table 组件 01.课程简介.md 08.Vuex的原理和用法 09.Datepicker 组件 01.课程简介.md 10.自制路由器 11.滚动组件 01.课程简介.md 02.代码.md 12.管理后台的设计思路 01.课程简介.md Vue UI 框架-高级版 视频 0202 0204 0205 0206 0207 0303 0304 0305 0403 0404 0405 0406 0407 0505 0506 0507 0508 0509 0603 0604 0605 0606 0607 0608 0609 0610 0611 0702 0703 0704 0705 0706 0707 0802 0803 0804 0805 0806 0807 0902 0903 0904 0905 0906 0907 0908 0909 0910 0911 1002 1003 1004 1005 1006 1007 1009 1010 1011 1012 1102 1202 1203 1204 1302 1303 1304 1402 1403 1404 1405 1406 1407 1408 1409 1410 1411 1412 1413 1414 1415 1416 1417 1418 1502 1503 1504 1505 1506 1507 1508 1509 1510 1511 1512 1513 1514 1515 1602 1603 1702 1704 1705 1706 1707 1708 1709 1710 1802 1803 1804 1805 1806 1807 1808 1902 1903 1904 1905 1906 19

07 课件 02.课程介绍 01.课程简介.md 09.关于轮子的面试题[答案].md 03.体验、交互、sketch 01.课程简介.md 02.讲义.md 06.UI测试题.md 06.UI测试题[答案].md 04.框架雏形、单元测试、Mock数据 01.课程简介.md 02.讲义.md 08.项目搭建.md 08.项目搭建[答案].md 05.单元测试、自动化测试、持续集成、NPM 发布包 06.省市区级联选择组件(上) 07.省市区级联选择组件(下) 01.课程简介.md 08.深入讲解Vue 动画原理 09.无缝轮播组件 10.Nav 组件 11.使用 Karma做测试 12.表单验证 13.分页组件 14.Table 组件 01.课程简介.md 15.图片上传组件（单文件） 16.中级轮子：图片上传组件（多文件） 17.中级轮子：图片上传的单元测试 18.Sticky 组件 19.课程总结