如果你已经能用 Vue 3 写业务页面，但一遇到「把重复的交互封装成组件」就犯怵，或者团队里那套内部的 UI 库你只会用不会改，那这门课补的正是这块。它不讲 Vue 的基础语法，也不带你做后台管理系统，而是把镜头对准一件事：从零搭出一个能发版、能被别人依赖的 Vue 3 组件库。

先确认你缺的是哪一块

组件库开发和写页面是两种活。写页面时你关心的是「这个需求什么时候上线」；写组件库时你要关心的是「这个 Button 被人在表单里、弹窗里、表格里各用一次，会不会崩」。前者靠业务熟练度，后者靠对 API 设计、样式隔离、类型定义、构建产物的理解。这门课适合下面几种人：

  • Vue 3 用了一两年，组合式 API 写得顺手，但从没独立设计过一个对外暴露 props 和事件的中型组件；
  • 接手了公司内部组件库的维护，看得懂单个组件，但说不清整个库的目录约定、主题变量、打包方式是怎么串起来的；
  • 面试被问到「你怎么做一个组件库」，只能答出「用 Vue 写组件然后 npm publish」，再往下问就空了；
  • 想把自己项目里反复复制的按钮、表单、弹层抽出来复用，但一抽就发现样式互相污染、改一处崩三处。

如果你完全不熟悉 Vue 3 的 setup、defineProps、插槽和 v-model 的写法，建议先把基础打牢再回来，否则会卡在语法而不是设计上。

这门课真正在教的设计决策

组件库的难点不在「写出来」，在「写对」。同一个 Button，props 是叫 type 还是 variant，尺寸用 size="small" 还是 small 布尔值，禁用状态要不要同时禁用点击事件和焦点，加载状态点击该不该触发——这些选择一旦定下就很难改，因为下游有几十个页面在依赖它。课程会围绕这类决策展开，而不是给你一段能跑的代码就完事。

样式方案是另一个绕不开的点。组件库要能被人用在自己的项目里，就不能假设对方的全局样式、CSS 变量、重置规则和你一样。你会看到如何用一套可覆盖的主题变量把颜色、圆角、间距收口，如何避免选择器污染到使用方的页面，以及按需引入到底是怎么在构建层面实现的，而不是靠文档里一句「支持按需加载」。

还有组合式组件的处理。像按钮组、表单控件这类需要父子通信的场景，光靠 props 层层传会很难看。课程会带上这类「多个组件协同」的例子，让你理解 provide/inject、插槽作用域在组件库语境下该怎么用。

看完你应该能回答的问题

  • 一个组件库的公开 API 该由哪些部分组成，props、事件、插槽、暴露方法分别解决什么问题？
  • 怎么让使用方既能全局注册，又能按需引入，两种方式的构建产物有什么差别？
  • 组件的样式怎么做到既不污染外部，又能被外部主题覆盖？
  • 父子组件之间既要灵活又要类型安全，什么时候用 props，什么时候用插槽，什么时候该用注入？
  • 一个组件从设计到能发版，中间要补哪些东西——类型声明、单元测试、文档示例？

配套练习怎么用

建议边看边动手，不要只过一遍视频。挑一个你项目里重复最多的交互（大概率是按钮或输入框），按课里的思路重新设计一遍它的 API，写清每个 props 的语义和默认值，再尝试把它单独打包出来被另一个小项目引用。这个过程里你踩到的坑，比看完十节课都值。按钮组、表单这类多人协作的组件可以放在后面练，先跑通一个最小可用的组件库闭环。

如果时间紧，优先看样式隔离和构建产物那两部分——这两块是「会用组件」和「能维护组件库」之间最明显的分水岭。

Vue.js 3 高级编程：UI组件库开发

????Vue.js 3???????��UI?????

??????

??????Vue.js 3 UI?????????????????????????????????????????????????????????????

? ?????

??????Vue.js 3 UI???????????????????????????????????????

?��?????

? Vue.js 3??????
? UI???????????
? ???????????

�γ�Ŀ¼

? ?��?
??45?? ????button????????????.mp4  [66.3 MB]
ui????? - ??8?? css ???CSS????????Z.mp4  [46.5 MB]
ui????? - ??33?? buttonGroup?????????.mp4  [63.3 MB]
ui????? - ??22?? button???block??D????.mp4  [20.6 MB]
ui????? - ??26?? button???icon???.mp4  [63.9 MB]
ui????? - ??27?? button???loading????.mp4  [61.5 MB]
ui????? - ??31?? buttonGroup???.mp4  [27.5 MB]
ui????? - ??18?? button???disabled????.mp4  [92.8 MB]
ui????? - ??28?? button???loading??????.mp4  [69.5 MB]
ui????? - ??34?? sass - deepMarge?????????.mp4  [61.6 MB]
??40?? sass - ?????????????????.mp4  [69.7 MB]
ui????? - ??23?? button???border????.mp4  [41.0 MB]
??35?? sass - ???????????.mp4  [22.1 MB]
??42?? sass - ????????????.mp4  [48.4 MB]
ui????? - ??4?? ????button????.mp4  [83.0 MB]
??41?? sass - ???????????????.mp4  [43.5 MB]
ui????? - ??25?? button???circle???.mp4  [47.0 MB]
ui????? - ??10?? sass ????block????.mp4  [38.7 MB]
??47?? button????????.mp4  [36.5 MB]
??49?? button??????????????.mp4  [95.5 MB]
ui????? - ??15?? button??????????.mp4  [51.0 MB]
ui????? - ??24?? button???size????.mp4  [39.2 MB]
ui????? - ??9?? css ???????????.mp4  [27.9 MB]
??46?? ????button????????????.mp4  [60.0 MB]
ui????? - ??20?? button???text????.mp4  [92.4 MB]
ui????? - ??5?? ?????????????.mp4  [96.8 MB]
ui????? - ??19?? button???hover????.mp4  [24.1 MB]
ui????? - ??17?? button???round???.mp4  [16.5 MB]
??48?? button????????????????.mp4  [66.8 MB]
??43?? sass - ??????????????.mp4  [61.1 MB]
??38?? root - ??????????.mp4  [27.6 MB]
??39?? sass - ?????????.mp4  [33.3 MB]
ui????? - ??30?? button???slot???.mp4  [13.3 MB]
ui????? - ??7?? css ???????Z.mp4  [37.4 MB]
??????? 35 ???????????????

??????

  • Vue.js??????
  • ???????
  • UI????

ѧϰ�ջ�

????Vue.js 3???????
??????��UI?????
????UI???????

????????

????????????????