如何构建基于Vue的UI组件库——Heaven UI？

本文共计2181个文字，预计阅读时间需要9分钟。

Vue 是一套渐进式构建用户界面的框架，已有越来越多的开发者在学习和使用。组件库能帮助我们高效开发，但需要从基础做起，通过一个个组件拼接起来。

前⾔

Vue是⼀套⽤于构建⽤户界⾯的渐进式框架,⽬前有越来越多的开发者在学习和使⽤。⽽组件库能帮我们节省开发精⼒，⽆需所有东⻄都从头开始去做，通过⼀个个⼩组件拼接起来，就得到了我们想要的最终⻚⾯。在⽇常开发中如果没有特定的⼀些业务需求，使⽤组件库进⾏开发⽆疑是更便捷⾼效，⽽且质量也相对更⾼的⽅案。

本⽂阐述了如何基于vue⼀步步完成⼀个UI组件库的打造。

组件库官⽹

github地址

npm地址

⼀、技术栈

我们先简单了解⼀下要搭建⼀个 UI 组件库，会涉及到哪些技术栈，下⾯是我选⽤的内容：

1. vue-cli：官⽅⽀持的 CLI 脚⼿架，提供⼀个零配置的现代构建设置；
2. Vue: 渐进式 JavaScript 库；
3. Jest：JavaScript 测试框架，⽤于组件库的单元测试；

⼆、组件开发

项⽬初始化

开始，需要创建⼀个空的vue项⽬，在此基础上我们才能开始接下来的组件库编写！

npm i -g vue-cli // yarn add global vue-cli vue init webpack heaven-ui //(heaven-ui)可以随意更换成你的名称 cd heaven-ui npm run dev

我们安装完依赖并进⼊项⽬启动服务后vue-cli3会⾃动给我们展示⼀个默认⻚⾯，这⾥我使⽤sass，⽤于美化ui组件的样式。