简介
每个前端，不仅想拥有一头浓密的头发，还想拥有一套自己的UI库。
以前，我一直想做一个UI库，可是写组件简单，怎么开始、怎么搭建我不会了。为此迷茫了好久，终于在element这里，我得到了启发（copy）。今个就让我们站在element这个巨人的肩膀上，运用工程化的思维，一起打造一个属于自己的UI库---搭建文档项目。
相关的代码地址：UI-CLI
一、如何合理构建文档项目和组件项目？
一套优秀的UI基础框架，可以把程序员从繁杂的目录中摘出来，专心致志搞组件开发。
一套优秀的UI库，不仅需要功能完善的组件，还需要详细的文档，但怎么安排这两个项目呢？有两种做法：
- 两个项目分开，各自单独创建项目
- 两个项目合为一块
两个项目分开呢，结构清晰，各司其职；而且在本地开发，通过 npm link 来构建全局包，进行引入，也能达到不错的开发体验。
我们分析一下element的项目结构，可以看出，element内部是把两个项目合二为一的。合二为一，可以达到更丝滑的开发体验，不用启动两个项目，节省资源。
通过自己实践开发，得出结论：还是合二为一的舒服。
二、项目启动
这里说的启动项目，其实启动的就是文档项目。流程就是：遍历组件文件，生成入口文件-->文档项目中引入入口文件-->启动文档项目
如下图，是element的package.json文件：
执行dev命令，同时也顺带执行了bootstrap和build:file命令，其中build:file就是输出入口文件，如下图：
这个文件的功能是：
引用所有的element组件，并进行全局注册
同时，启动文档项目，在该项目中引入element全组件。
三、路由设计
路由设计是针对文档项目。如下图为element的主页图：
其中，指南、主题、资源等为加载的vue文件，而组件中各内容均为markdown文件。所以在路由处理的时候，要进行区分加载。
element文档项目中的路由是由函数生成的。其中nav.config.json文件是“组件”模块单独的路由文件，通过registerRoute函数加工一下nav.config.json文件，生成components路由，通过generateMiscRoutes函数生成其他路由，双方concat一下。恭喜勇者，你获得橙色装备route一份，去组成文档项目吧。
markdown文件无法直接转换成Vue，所以element自己做了一个插件md-loader（build-->md-loader），流程是：通过markdown-it转成html-->转换成Vue。但碰到中间有引用的怎么办呢？
解决方案是制作一个demo-block.vue（examples-->components-->demo-block.vue）组件，将引入的html 内容进行替换并渲染。效果如下图：
以后在处理其他框架的时候（如react），完全可以参考。而且这个插件也可以直接拿来用（手动狗头）！
四、国际化
element中的国际化处理的很巧妙，和路由深深绑定。在examples-->i18n中，以各语言为key，里面是对应的各种语言的词语。这样在pages-->template中进行替换即可生成各语言包的文件。
而docs中的各语言包是为了各组件准备的，自己加进去的，这样也保证翻译准确。其实国际化对于自己团队使用来说，意义也不大，Vant国际化也只做了英文的，所以自己做的时候，可以把它砍掉。
五、关于css样式
element用的是sass样式预处理，而且它并不是在单个组件中引用的，他最后是打成一个css包，在项目入口中引用。如下图：
编写一个css是怎么保证命名不冲突的？编写成一个文件的好处是啥？
在编写组件样式的时候，遵循命名公约，在packages-->mixins中有混入命名方法：
每个模块的命名都不一样，各样式都写在最大class之下，就不会造成命名冲突与样式冲突了。
这样做的好处就是最大限度的利用sass特性，不会造成样式冗余，文件结构更清晰。
这样做好处不言而喻，但有时候来回切换，对开发来说，也挺痛苦。开发的时候自己选适合自己的方案就好。
六、eslint+prettier
element中使用eslint进行格式限定，但没有使用prettier进行样式强制格式化，这样就有漏网之鱼。之前，自己就有这样的疑惑：eslint和prettier的关系是什么？
eslint是格式检错，当然也可以进行自动格式化，但格式化的时候，不会对诸如Vue中的template中的内容、css等进行格式化，所以就需要prettier。前提是eslint和prettier的规则要保持一致（他们俩的默认规则有些都不一样，这方面要注意避坑）。
那vscode中的插件和package.json中的prettier插件、eslint插件有什么区别？
VSCode中的插件在代码编写的时候，可以有效直接进行代码格式化之类的操作，但当开发者使用不同的开发工具时，这些就哑火了，所以还得需要安装eslint+prettier的node_module包，但进行格式化或者纠错的时候就需要使用命令行了。
项目中的 .eslintrc.js、.prettierrc.js文件是格式化规则（没有得到话，则按照插件默认规则来），最大程度保持格式的统一。
分享一条命令：
七、自动化
element中运用了很多自动化生成的东西。比如生成组件入口文件：
像上面这么多的引入和导出，一个个写得写到啥时候，所以就可以编写文件模板，利用json-templater/string插件（也可以利用es6的模板编译）进行变量替换，最后利用node生成该文件即可（build-->bin-->build-entry.js）。像这样的操作很多，比如css样式的生成，国际化文件生成等。这点element做的是真好。
我们在平时讨论了那么久的工程化，这不就是工程化嘛，所以，在咱们自己编写的时候，完全可以引入这种思想。
结语
本文没有写组件如何编写，因为说实话大多数组件的编写并没有什么难度，项目的搭建反而是比较值得讨论的地方。这是基于Vue2的element UI项目结构，虽然没有炫酷的各种框架与新特性，但还是有很多值得学习的地方。最后再贴一遍代码地址：UI-CLI
考虑到项目的健壮性，我们团队一直没考虑上Vue3，但现在Vue3气势如虹，也成为了默认版本，上Vue3的时机也已经成熟了，所以，下一篇，我将从Vue3+TS的角度出发，写一篇Vue3的组件库如何编写。