前言

背景

相信很多同学的公司面向B端的后台系统的UI库都是用的ElementUi，首先非常感谢饿了么团队给我们提供了这么优秀的UI库，提高了研发的生产力，让众位同学有更多的时间学(摸)习(鱼)，但是享受便利的同时，肯定也有不甘寂寞的同学想知道ElementUI背后具体是如何做的，比如你有没有产生这样的疑问：

• 如果自己想搭建一个组件库，项目目录如何组织？
• 组件库的样式隔离是如何做的？
• 不同环境下运行的包是如何生成的？
• 全局加载和按需加载能力是如何做的？
• 组件库如何发布到CDN和npm的流程是什么？
• 组件库的官方文档是如何搭建的，有更好的解决方案吗？
• 组件库是如何进行国际化的？
• 组件库的主题定制是如何做的？
• 使用频率高的组件的实现原理是什么？比如Button、Message、Card、Alert等等
• 组件库的类型声明和单元测试用例是如何书写的
• ......

笔者刚开始看ElementUI源码也是一头雾水，看过别人写的一些解读的文章，加上自己调试，有了一定的心得和理解，于是想分享出来供想学习ElementUI源码的同学研究一下，于是有了MSSUI。

学习须知

因为MSSUI本身就是模仿了ELementUI，用法其实和ElementUI是一样的，值得注意的是，笔者并没有将所有的组件 都拿到MSSUI中，原因在于：

• 对于组件，每个人的实现思路是不同的，MSSUI的目的不是重新造轮子，只是为了学习组件库搭建的全流程
• ElementUI是一个工程浩大的项目，个人能力达不到，而且也没有必要
• 把MSSUI的源码从Github上clone下来，对照着文章两者结合

资源

源码放放在了Github上，点击mssui (opens new window)获取

MSSUI实现细节 欢迎去我的小站 个人博客 (opens new window)品用

最后

最后，希望看到这个项目的同学能学到东西。