前言：前端组件化是当今的热门话题之一，也是我们在开发单页应用时经常遇到的问题。现在我们有了一个非常实用的PerfectElement-UI。各大厂商也纷纷宣布开源XXX-UI。但也存在一些问题。比如每个公司可能需要不同的业务组件，或者我们想开发自己的组件库来增强组件的可控性。那么我们该怎么做呢？这里记录下我从零开始搭建组件库的过程。目前只有几个简单的组件，但我会慢慢更新维护：VV-UI1。环境准备我们需要准备一系列的环境来构建组件库。首先，我们考虑以下几个问题：如何搭建脚手架，如何规划目录结构，如何编写文档。首先，对于脚手架环境，已经有非常成熟的vue官方脚手架。直接用吧#全局安装vue-cli$npminstall--globalvue-cli#根据webpack模板新建项目$vueinitwebpackmy-project#安装依赖，开始吧$cdmy-project$npminstall$npmrundev那么我们来看第二个问题，如何规划我们设置的目录结构呢？首先，我们需要有一个存放组件的目录，和一个存放示例的目录。所以我们要对vue-cli生成的项目结构做一些改动：....|--examples//原来的src目录，改为examplesexampledisplay|--packages//新的packages用来写存储组件....在这种情况下，我们需要对我们的webpack配置文件进行一些调整。首先，我们要把原来编译指向src的目录改成examples。其次，为了npmrunbuild能够正常编译包，我们还需要在babel-loader中添加编译目录：{test:/\.js$/,loader:'babel-loader',include:[resolve('examples'),resolve('test'),resolve('packages')]}以便我们构建一个简单的目录结构。接下来我们需要考虑如何编写文档。对于文档的编写，markdown自然是最合适的，那么在vue下如何编写markdown文档呢？答案当然是vue-markdown-loader。然后我们根据文档配置相关插件信息：rules:[{test:/\.md$/,loader:'vue-markdown-loader'}]好了，我们可以开始尝试写文档了，例如/docs目录下新建test.md。#test>HelloWorld并创建一个指向我们的md文件的新路由：{path:'/test',name:'test',component:r=>require.ensure([],()=>r(require('../docs/test.md')))}打开我们的浏览器http://localhost:8080/#/test哈哈果然成功了。不要太高兴....问题还是来了：我们期望的文档不仅可以编译markdown，还可以更好地识别demo代码块。一方面最好是演示，另一方面可以展示演示代码，像这样：Sowhatdoweneedtodo?vue-mark-down的功能绝对不止于此！于是我们继续阅读它的文档，发现它其实是对markdown-it进行了封装，并且支持options选项。这样，我们就可以为我们的markdown定义一个唯一的标识符。这里我使用demo来识别需要显示代码块的地方，所以需要配置options选项：constvueMarkdown={preprocess:(MarkdownIt,source)=>{MarkdownIt.renderer.rules.table_open=function(){return'
