前端组件化是当今热议的话题之一，也是我们在开发单页应用经常会碰到的一个问题，现在我们有了功能非常完善的Element-UI。

　　各个大厂也相继宣布开源XXX-UI。

　　但是也会存在一些问题，比如每个公司可能需要的业务组件不尽相同，或者我们想自己开发一套属于自己的组件库，来增强对组件的可控性。那么我们该如何去做呢?

　　今天，就带大家简单来学一下：如何从零开始搭建Vue组件库 VV-UI?

　　1. 环境准备

　　我们搭建组件库，需要准备一系列环境，首先我们要考虑一下问题：

　　·

　　脚手架如何搭建

　　如何规划目录结构

　　如何编写文档

　　首先，对于脚手架环境的问题，目前已经有非常成熟的vue官方的脚手架，我们拿来用就好了

　　接着我们看第二个问题，如何规划好我们组建的目录结构?

　　首先我们需要有一个目录存放组件，有一个目录存放示例。所以我们要对vue-cli 生成的项目结构做一下改造：

　　这样的话，我们需要再把我们webpack配置文件稍作一下调整，首先是把原先的编译指向src的目录改成examples，其次为了 npm run build 能正常编译 packages 我们也需要为 babel-loader 再增加一个编译目录：

　　这样我们搭建起来一个简易的目录结构。

　　紧接着我们需要考虑如何编写文档。对于文档的编写，自然是markdown最合适不过了，那么怎么让我们在vue下可以去写 markdown 文档呢?答案当然是 vue-markdown-loader。

　　然后我们按照文档配置了相关的插件信息：

　　好了，我们可以开始尝试写文档了，在 example/docs 目录下新建 test.md。

　　同时创建一个新的路由，指向我们的md文件：

　　别急，问题还在后面：我们期望的文档不仅能编译markdown，而且最好能识别demo代码块一方面做演示，一方面可以显示演示代码最好了，就像这样：

　　那我们需要怎么做呢?vue-mark-down 功能肯定不止这些!于是我们继续阅读它的文档，发现其实他就是封装了 markdown-it，支持 options 选项。

　　这样我们就可以为我们的markdown定义独特的标识符，这里我用 demo 标识需要显示代码块的地方，所以我需要配置options 选项 ：

　　这里简单的描述一下这段代码是干什么的：首先把内容里面vue片段编译成html，用于显示，另一方面用highlight来高亮代码块。demo-block本身是我们定义好的组件：

　　这样，我们的 test.md 便可以这么去写了：

　　2. 如何编写组件

　　环境准备完毕，紧接着要开始编写组件，考虑的是组件库，所以我们竟可能让我们的组件支持全局引入和按需引入，如果全局引入，那么所有的组件需要要注册到Vue component 上，并导出：

　　接着要实现按需加载，我们只需要单个导出组件即可：

　　其次，我们还需要考虑一个问题：既然是单页面应用，必然要去解决样式冲突问题，如果组件内使用soped，那么样式就无法从组件内抽离出来，达不到可定制化主题颜色的目的。

　　我们需要一套可以分离处理的样式，可以自行编译，可以相互不污染。这时候css 的BEM规范就显得尤为重要。

　　说到这里，目前对BEM规范支持较好的插件就是postcss了，他允许我们配置BEM之间的连接符和缩写：

　　这样我们就可以把样式单独的抽离出来，通过gulp进行打包编译：

　　最后生成我们的样式代码。

　　好了开始我们的测试：

　　优化与不足

　　组件导出代码暂不支持自动化生成：比如我们的组件index文件，每次添加组件都需要不断地改写，可以尝试进行webpack配置，npm run dev 的时候自动进行组件检测，然后帮我们写好导出代码。

　　目录结构划分缺陷：目前所有内容仅支持中文，如果想要做到支持国际化，那么还需要重新调整目录结构。

　　发布tag：需要编写脚本支持tag发布

　　组件太少：文档刚写，组件还不是很多，慢慢去维护，相信会越来越多的组件，做业务的过程中也可以把常用的组件加进去，这样更加方便自己以后的维护和学习

　　最后，如果你对于前端的很多相关知识点还是似懂非懂。

　　那么小千还是建议你去花钱参加个培训班学，这样可以用别人走过的路、花过的时间，帮助自己快速提升起来，花一点点钱就能学到别人好多年的经验，何乐不为呢?

　　千锋深圳HTML5大前端培训注重将理论和实践相结合，融合腾讯、阿里两大互联网巨头前端技术精华。系统的囊括主流业务、应用终端等职场前沿技术。

上一篇

千锋深圳Java培训老师分析 学习费用高吗好就业吗

下一篇

非计算机专业的同学 能加入千锋深圳Java培训吗