20｜组件库：如何设计你自己的通用组件库？

大圣



该思维导图由 AI 生成，仅供参考

你好，我是大圣。上一讲 TypeScript 加餐学完，你是不是想赶紧巩固一下 TypeScript 在 Vue 中的使用呢？那么从今天开始，我们就重点攻克 Vue 中组件库的实现难点，我会用 7 讲的篇幅带你进入组件库的世界。
学习路径大致是这样的，首先我会给你拆解一下 Element3 组件库的代码，其次带你剖析组件库中一些经典的组件，比如表单、表格、弹窗等组件的实现细节，整体使用 Vite+TypeScript+Sass 的技术栈来实现。而业务中繁多的页面也是由一个个组件拼接而成的，所以我们可以先学习一下不同类型的组件是如何去设计的，借此举一反三。
环境搭建下面我们直奔主题，开始搭建环境。这个章节的代码我已经推送到了Github 上，由于组件库是模仿 Element 实现的，所以我为其取名为 ailemente。
接下来我们就一步步实现这个组件库吧。首先和开发项目一样，我们要在命令行里使用下面的命令创建 Vite 项目，模板选择 vue-ts，这样我们就拥有了一个 Vite+TypeScript 的开发环境。
npm init vite@latest
关于 ESLint 和 Sass 的相关配置，全家桶实战篇我们已经详细配置了，这里只补充一下 husky 的内容。husky 这个库可以很方便地帮助我们设置 Git 的钩子函数，可以允许我们在代码提交之前进行代码质量的监测。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文详细介绍了如何使用Vite和TypeScript搭建Vue组件库的开发环境，并利用Sass和ESLint进行代码规范和质量的监测。作者以搭建通用组件库为例，详细讲解了布局组件的设计和实现过程。通过使用husky库设置Git的钩子函数，确保代码提交前进行代码质量的监测。在组件设计方面，作者介绍了基础组件、表单组件、数据组件和通知组件的分类，并详细讲解了各个组件的设计原则和功能范围。此外，文章还介绍了如何使用Sass的Mixin来提高CSS代码的效率，以及如何使用TypeScript开发组件并进行参数类型校验。通过本文，读者可以了解到如何搭建Vue组件库的开发环境，学习到了一些实用的技术细节和工具的使用方法，为开发通用组件库提供了有益的参考和指导。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(32)

最新
精选

关关君
mixin.scss 里少一个变量 $state-prefix: 'is-';
作者回复: 感谢感谢
2021-12-08
5
16
仝
feat 代表新功能，docs 代表文档，perf 代表性能那剩下的表示什么，哪里有注释吗
作者回复: 这里我忘了解释了，其实就是单词的大致字面意思, git的提交规范大部分都是参考angular的，链接在这里，团队可以根据自己特点随意扩展,https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit feat: 新功能 fix: 修改 bug docs: 文档 perf: 性能相关 refactor: 代码重构（就是不影响使用，内部结构的调整） test: 测试用例 style: 样式修改 workflow: 工作流 build: 项目打包构建相关的配置修改 ci: 持续集成相关 revert: 恢复上一次提交（回滚） wip: work in progress 工作中还没完成 chore: 其他修改（不在上述类型中的修改） release: 发版 deps: 依赖相关的修改
2021-12-09
3
10
一块小砖头
感觉组件篇的可能学起来很吃力，甚至都看不懂，是不是要先搞一个vue3的项目学学，既然vue3都没学过就开始写组件封装是不是有点扯了
作者回复: 感谢建议，清单应用和实战篇有哪部分是不太清楚吗？
2021-12-14

8
ll
年底事有点多，一个不留神落后好几节课，现在从进阶开始追。代码照着写了一边，对比着 gtihub 的代码库，然后再自己实现一边，这节课就用了两天。说实话技术这种东西，了解是一回事，会用是另外一回事。就这么个过程，既然选择了这条路，好好走就是了。感慨下，打个时间戳，继续赶路
作者回复: 加油加油
2022-01-06

5
Geek_95cc7a
啊圣，你在认真写吗？ if (props.direction === 'vertical') { return true } else { return false } }
作者回复: 感谢提醒，已经改成return props.direction === 'vertical' 了
2021-12-22

2
白泗小林
windows10 环境下用 npx husky add .husky/commit-msg "node-scripts/verifyCommit.js"。再将生成的commit-msg 文件中改回 node scripts/verifyCommit.js
作者回复: commit-msg改成pre-commit更好些，文章里我也更新了一下
2021-12-13

2
SjmBreadrain
还有代码里引进的VNode也报模块“"../../runtime-core/dist/runtime-core"”没有导出的成员“VNode”。这些都是从vue里引进的，没明白是哪里错了
作者回复: VNode是一个类型声明，需要在ts环境下才能使用，你看下是不是script setup没有标记lang="ts"
2022-01-20


SjmBreadrain
我也是照着上面的步骤做的，后面弹出Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=4c6e32ec' does not provide an export named 'widthDefaluts' 这是什么错，按理我是从vue里引进的不应该报这个错
作者回复: 你好，我看了下报错信息，应该是withDefaluts, 你写的是widthDefaluts
2022-01-20


JC.彦
我对Vue3还不是很了解，现在有个疑问。 (vn.type as Component).name，这应该是获取组件名的操作吧？为什么要加上「as Component」？我试了一下，不加as Component也能获取组件名。
作者回复: 这个是Typescript的类型语法，帮助在类型判断的时候报错，实际运行的时候没有影响
2022-01-12
2

风一样
$--header-padding 这个变量在哪里呢？
作者回复: 在styles下面定义，可以看这里的代码 https://github.com/shengxinjing/ailemente/blob/main/src/components/styles/mixin.scss
2021-12-30



收起评论