看了elementUI和bootstrapvue有的一个组件就有好几个js文件，都看不懂。看别人的视频教程封装一个组件也没写那么的东西一个文件就写完了

最简单的组件：会 CSS 就能封装，比如布局组件

简单交互的组件：会 DOM 事件就能封装，比如 Button 组件

复杂交互的组件：还需要一点点封装技巧，比如 Pager 组件、Datapicker 组件、Form 组件

代替 Native 级别的交互组件：需要你对交互有很多经验，比如普通 Scroll 组件、普通 RickText 组件、普通 Table 组件

性能增强组件：需要你有专门的演算法，比如支持虚拟滚动的 Scroll 组件、兼容性强的 RickText 组件、功能强大的 Table 组件

大部分组件唯手熟尔，小部分组件需要专门的知识。

本人目前只停留在会用vue写网页。这是我的写的网站，求各位大佬点赞。

dengguochao23：实战 | 基于Vue.js+Element-ui 搭建的前端项目?

zhuanlan.zhihu.com图标

封装组件需要很多知识储备，网上的视频只是告诉你思路，做个简单的demo！下面说一下需要哪些知识

  1. webpack要非常熟悉，可以根据不同环境搭建不同配置，比如开发环境，生产环境，测试环境！可以把不同模块中的css提取压缩到同一个文件中
  2. 自动化测试工具需要熟练掌握，如何使用快照测试，如何使用断言测试，单元测试，代码覆盖率测试要怎么写
  3. Git操作，babel配置，npm发布都是基本操作
  4. 需要对vue框架非常了解，如状态如何在组件之间相互传递，如何用插槽提高可定制性，了解事件系统是什么样的机制
  5. 需要有统一样式的UI，还要计划好组件有多少种状态，每种状态下的样式
  6. 提高组件的实用性，易用性，定制性，也就是说用户可以通过简单修改属性，让组件显示不同的样式实现不同的功能，可以把小组件合并为大组件，提供的事件和绑定的方法要完善。并且这些操作要简单不能太繁琐
  7. 组件文档要详细到位，示例，效果，代码，文字说明都要有
  8. 要有样式模块化思想
  9. 兼容性看你的定位了，是不是要打造支持所有浏览器的组件

目前只能想到这么多了，如果想深入了解还是看看优秀组件库的源码，并且自己动手实现一个比较复杂的组件，并尝试去理解他们的设计逻辑和出发点，为什么这样设计

你这里指的组件是通用组件吧。首先通用组件和业务组件是有一定差的，通用组件考虑的要更多一些，用的地方比较多，不想业务组件，只在当前项目中的一处，或者几处有用到。

写通用组件需要多少功底，要具体看你封装什么类型的通用组件。如果是简单的组件，比如 button、Tag 这些简单的组件比较简单，你会用 Vue.js ，CSS 功底还过得去基本就没问题了。

不过即使是 button 这样的简单组件，如果想写好，特别是代码要优雅，也是要有一定的功底，比如 button 组件中有这么一个需求：button 中可以有文字和 icon，有一个属性（position=left/right）控制 icon 是在文字的左边还是右边。

您思考两分钟，您会这么做？

可能大多数人的做饭都是根据 position 用 v-if 来判断，其实更好的做法是用 CSS 来控制，给个提示用 flex 中的 order。

这不就要有比较扎实的 CSS 功底吗~~

对于一些复杂的组件对 JS 的要求比较高了，比如 upload 组件。复杂的组件就涉及到组件的拆分、各个子组件之间如何交互，这里面要求就比较高看，能够体现出功底。

所以我建议你去看看 Element 和 IView 的组件库源码，看人家是怎么封装组件的。

做 element3 有段时间了

其中除了写组件其实还涉及到很多点：

  1. pr 过来如何验证是否有没有问题
    1. 需要了解 github action
    2. 需要搞定 unit test
    3. 需要 lint
  2. 如果让用户可以在多个坏境下使用 element3
    1. 需要了解 rollup 或者 webpack
    2. 需要了解要支持的坏境，比如 cjs、esm、gloabl 等
  3. 如何规避 ref value 的心智负担
    1. 需要配置 eslint
    2. 并且还需要深入了解 vue 的 eslint 配置
  4. 如何规范开发组件的流程
    1. 我们采用的是 TDD ，所以需要学习 TDD
  5. 如何避免任务冲突
    1. 需要了解任务分配等
  6. 如何管理一个远程兼职的团队成员
    1. 需要了解... 其实我也不了解（逃）
  7. 太多了。。。想起来在说

---

组件库这个东西

写组件是一个方面

前端工程化是另一个方面

除此之外还要加上团队管理

最后不要脸的求个 star ：element3

简单的组件封装没有那么难，但要做高质量的组件还是很有难度的。也没啥捷径可言，就是多写多练多实践，从失败中总结经验，慢慢提高。可以从Switch、Radio简单组件 -&> Form表单组件（如Button、Select）-&> Form、Table -&> 组合组件这个路线开始。还有一定要多用自己开发的组件，最好要给其他人使用，这样才能发现问题，进行完善。

这个问题我也蛮好奇的

我认为其中有个重难点是如何写好测试用例

关于组件的封装，除非是功能性复杂，或者需要涉及到一些演算法的组件，大部分在GitHub都可以参考（照搬）逻辑，因为这部分有很多基础通用的东西，然后再混入自己的想法

我就一写代码的，哪懂这个

这要看什么基本都组件。

UI库这一类的组件，需要严谨，和可扩展，可维护。

功能性也要好一些，所以写起来考虑的事情就要多，代码就多一些。

分成多个js文件，是为了便于维护。

如果是项目里的简单的组件，要求就会低一些，实现的功能也相对弱一些，或者是针对UI库的二次封装。

所以看起来代码会少，会简单。

另外项目里的组件，改起来也方便，所以写的时候也可以不用考虑太多。

最后，一些视频，目的就是简单的介绍一下vue的组件要怎么写，并不是介绍要如何写一个UI库。

推荐阅读：
相关文章