Vue.js 3 UI组件库开发导读

这门课解决什么问题？从单页应用开发走向组件库开发，你会面临项目结构混乱、样式命名不规范、组件复用率低等痛点。这门课帮你把工程化搭建、UI样式规范和组件开发这三块缺口补齐，让你把手写组件变成可复用的库。很多转岗或查漏补缺的同学，往往在工程化层面卡住，导致后面组件开发无从下手。

适合什么基础？

需要具备Vue3基础，了解前端工程化概念，有从零搭建项目的意愿，但可能对组件库的工程化规范缺乏实操经验。如果连Vue3的基本用法都还不熟练，建议先补一补再来看这门课，否则看配置和样式规范时容易走神。

建议先看哪几块？

建议按学习顺序先看第一章（工作区配置）建立项目骨架，再看第二章（Sass样式规范）建立开发标准，最后从第三章动手开发Button组件。前两块是后两块的基础，没有规范地写样式，组件开发就会变成无头绪的拼接。具体来说，配置章节解决"怎么跑起来"，样式章节解决"怎么写得干净"，组件章节解决"怎么写出来"。

学完能独立做什么？

学完能独立搭建一个Vue3组件库项目，规范开发并发布Button等基础组件。你不再只是在一个项目中复制粘贴组件，而是能产出符合发布标准的组件资产。对转岗同学而言，这相当于补上了工程化这一课，为后续做组件库、做设计系统打下基础。

资料怎么配合练习？

资料包里的配置、样式和组件源码，建议边看边改。跟着配置搭建工作区，手写Button的圆角、禁用、链接等属性，再套用Sass命名空间和modifier规范，把每节代码跑通、改对，才是真收获。不要只看不动手，配置跑不通和样式命名写不对，靠看讲解很难记住。

课程目录

第1章 monoreop工作区配置
第01节.mp4 83.87M
第02节 monorepo 建立工作区.mp4 97.93M
第03节 构建演示项目.mp4 21.72M
第04节 构建button组件目.mp4 82.95M
第05节 全局注册、按需加载.mp4 96.84M
第2章 sass规范组件库UI样式
第07节 css 组件元素规范.mp4 37.42M
第08节 css 组件CSS的命名规范.mp4 46.54M
第09节 css 定义命名空间.mp4 27.89M
第10节 sass 定义block命间.mp4 38.72M
第11节 sass 定义子元素element命名.mp4 35.15M
第12节 sass 定义modifier以及modifierValue的属性.mp4 55.84M
第13节 sass 定义is方法生成禁用类名.mp4 47.55M
第14节 css组件为主题包定义.mp4 27.96M
第3章 button组件基本开发
第15节 button组件基础渲染.mp4 51.02M
第16节 button组件theme主题渲染.mp4 63.54M
第17节 button组件round圆角.mp4 16.52M
第18节 button组件disabled禁用.mp4 92.81M
第19节 button组件hover属性.mp4 24.10M
第20节 button组件text属性.mp4 92.42M
第21节 button组件link链接属性.mp4 58.03M
第22节 button组件block块级属性.mp4 20.55M
第23节 button组件border属性.mp4 40.99M
第24节 button组件size属性.mp4 39.23M
第25节 button组件circle圆形.mp4 46.98M
第26节 button组件icon图标.mp4 63.92M
第27节 button组件loading加载.mp4 61.53M
第28节 button组件loading业务加载.mp4 69.45M
第29节 button组件click单击事件.mp4 23.35M
第30节 button组件slot插槽.mp4 13.27M
第31节 buttonGroup组件.mp4 27.46M
第32节 buttonGroup组件样式.mp4 38.79M
第33节 buttonGroup属性优先级.mp4 63.25M
第4章 sass定义组件库样式变量
第34节 sass - deepMarge定义主题色.mp4 61.57M
第35节 sass - 层次色生成原理.mp4 22.12M
第36节 sass - @each
@for
@include生成层色.mp4 74.78M
第37节 sass - 其他属性的定义.mp4 32.11M
第38节 root - 了解基本用法.mp4 27.62M
第39节 sass - 定义变量前缀.mp4 33.30M
第40节 sass - 生成主题色变量属性.mp4 69.69M
第41节 sass - 生成层次色变量属性.mp4 43.47M
第42节 sass - 变量名称的使用.mp4 48.38M
第43节 sass - 生成全局变量属性.mp4 61.07M
第5章 button组件应用sass变量
第44节 组件可变化的属性.mp4 27.82M
第45节 定义button组件的私有变量.mp4 66.32M
第46节 生成button组件的私有变量.mp4 59.95M
第47节 button组件绑定变量.mp4 36.54M
第48节 button组件生成主题色变量.mp4 66.75M
第49节 button组件绑定主题色变量.mp4 95.55M
第50节 button组件绑定size尺寸变量.mp4 79.52M
第51节 button组件绑定fontSize文本尺寸变量.mp4 46.74M
第52节 button组件绑定disabled禁用属性变量.mp4 60.28M
第53节 button组件绑定link链接按钮变量.mp4 60.13M
第54节 button组件绑定text文本属性变量.mp4 117.63M
第6章 bem规则生成类名
第55节 bem规则生成类名的概念.mp4 33.51M
第56节 bem规则生成块元素类名.mp4 60.77M
第57节 bem规则生成element子块元素类名.mp4 31.45M
第58节 bem规则生成modifier修改属性类名.mp4 38.41M
第59节 bem规则生成state状态类名.mp4 66.85M
【免费课程+
www.
】源码+++课件.zip 1.77M
Vue.js 3高级编程：UI组件库开发/