如何开发一个基于 Vue 的 ui 组件库（二）

时间 2019-11-07

标签如何开发一个基于 vue 组件繁體版

原文原文链接

遗留问题

书接上回，说道利用 sideEffects 字段，只需读取源文件便可实现按需加载，还有个坑忘了说...css

文档中的样式打包后会丢失...html

由于咱们只注意到了做为组件库的源代码，而忘了咱们的文档是经过 vuepress 编译，即底层也是基于 webpack 进行打包。因此 sideEffects 中也要加上文档中的文件。vue

在编写组件库文档时，有两个必不可少的部分。webpack

这样实现简单是简单，不过维护时要同时改至少两份代码。好比 vant 的展现文档和 cube-ui 的展现文档。git

可是组件库中通常有大量的组件，不可能为每一个组件都维护一份小代码片断，而且别忘了这但是三个平台（硬点一个吼不吼啊~？）。github

最广泛的方式仍是基于 markdown-it，将本身的 vue 组件插入文档中。babel
比较有意思的是 mand-mobile 的文档编写方式。demo 的文档放在组件目录中，而后由 Doc 组件读取各个组件的 demo。markdown
- mand-mobile 的展现文档
- mand-mobile 的 Doc 组件
那么对于咱们使用 vuepress 编写文档的开发者来讲咋办咧？

首先让咱们来分析一下：这两份重复的代码应该以谁为主？即咱们应该只编写 demo 的代码仍是 code 的代码？先有鸡仍是先有蛋？物质决定意识仍是意识决定物质？

至少在编写 demo 和 code 这个问题中，我认为 demo 才是“本源”，为何？

这是最广泛的方式，各大组件库基本这么干
这是最天然的方式，由于 vuepress 会编译 md 中的 vue 组件
如果反过来，文档中以 code 为主，再由 code 生成 demo 会有一些不便
- 如何预处理代码：babel、scss 等？
- 如何插入生成的组件到文档中？
- 感兴趣的话能够看看这个插件 vuepress-plugin-demo-block

一开始我只在 .vuepress/components/ 中建了个组件自娱自乐，后来看到了 vuepress-plugin-demo-block，但以为由 code 生成 demo 有点儿绕。

因而本身搞了个插件 vuepress-plugin-demo-code，有须要的读者老爷能够自取~

解决了 demo 和 code 的重复编写问题，接下来是另外一个使人无发可脱的问题：如何自动生成并同步 .vue 组件的 api 文档？

手动维护确定是不行的，还好有一个炒鸡好用的库 vuese。vuese 会基于 ast 分析你的 .vue 文件，提取其中的 props、events、slots 等接口和参数的说明。

为了将其集成到 vuepress 中，我又整了个 markdown-it 插件 markdown-it-vuese。

只需使用如下的语法在导入已经存在的 *.vue 文件的同时，使用 Vuese 自动生成文档。

<[vuese](@/filePath) 复制代码

以上 to be continued...