脚本宝典收集整理的这篇文章主要介绍了如何开发一个基于 Vue 的 ui 组件库(二),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
书接上回,说道利用 sideEffects
字段,只需读取源文件即可实现按需加载,还有个坑忘了说...
文档中的样式打包后会丢失...
因为我们只注意到了作为组件库的源代码,而忘了我们的文档是通过 vuepress 编译,即底层也是基于 webpack 进行打包。所以 sideEffects
中也要加上文档中的文件。
在编写组件库文档时,有两个必不可少的部分。
这样实现简单是简单,不过维护时要同时改至少两份代码。比如 vant 的展示文档 和 cube-ui 的展示文档。
Codepen
、JSFiddle
或 CodeSandbox
的 iframe
。但是组件库中一般有大量的组件,不可能为每个组件都维护一份小代码片段,并且别忘了这可是三个平台(硬点一个吼不吼啊~?)。
最普遍的方式还是基于 markdown-it
,将自己的 vue 组件插入文档中。
比较有意思的是 mand-mobile 的文档编写方式。demo 的文档放在组件目录中,然后由 Doc
组件读取各个组件的 demo。
首先让我们来分析一下:这两份重复的代码应该以谁为主?即我们应该只编写 demo 的代码还是 code 的代码?先有鸡还是先有蛋?物质决定意识还是意识决定物质?
至少在编写 demo 和 code 这个问题中,我认为 demo 才是“本源”,为什么?
若是反过来,文档中以 code 为主,再由 code 生成 demo 会有一些不便
一开始我只在 .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...
以上是脚本宝典为你收集整理的如何开发一个基于 Vue 的 ui 组件库(二)全部内容,希望文章能够帮你解决如何开发一个基于 Vue 的 ui 组件库(二)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。