1.1.10 • Published 2 years ago
yunhe-ui v1.1.10
一、开发框架初始化
这一套开发框架我们把它命名为 Yunhe-Ui
。在技术选型上使用的是 Vite + Vue3 + Typescript。
二、实时可交互式文档
一个组件库肯定不止有 Button 一种组件,每个组件都应该有它独立的文档。这个文档不仅有对组件各项功能的描述,更应该具有组件预览、组件代码查看等功能,我们可以把这种文档称之为“可交互式文档”。同时为了良好的组件开发体验,我们希望这个文档是实时的,这边修改代码,那边就可以在文档里实时地看到最新的效果
三、代码预览功能
添加PrismJS以后,就会自动高亮源码了。
四、命令式新建组件
到目前为止,我们的整个“实时可交互式文档”已经搭建完了,为了满足能够在最短时间内就能够初始化一个新的组件然后着手开发,我们有必要把之前处理的步骤变得更加自动化一些,学习成本更低一些。
只要执行 yarn gen
就可以进入交互式终端,回答问题自动完成新建组件文件、修改配置的功能,并能够在可交互式文档中实时预览效果。
五、分开文档和库的构建逻辑
在默认的 Vite 配置中,执行 yarn build
所构建出来的产物是“可交互式文档网站”,并非“组件库”本身。为了构建一个 yunhe-ui
组件库并发布到 npm,我们需要将构建的逻辑分开。
六、尾声
至此我们的组件开发框架已经基本完成了,它具备了相对完整的代码开发、实时交互式文档、命令式新建组件等能力,在它上面开发组件已经拥有了超级丝滑的体验。当然它距离完美还有很长的距离,比如说方法的封装,样式的封装等等后续可以继续优化的内容。