前言
本文旨在给大家提供一种构建一个完整UI库脚手架的思路：包括如何快速并优雅地构建UI库的主页、如何托管主页、如何编写脚本提升自己的开发效率、如何生成CHANGELOG等等，这里提供了一个Demo可供大家参考：
初始化目录结构
主流的开源UI库代码结构主要分为三大部分：
我们先用vue-cli3初始化一个模板，然后在根目录下新增三个文件夹，一个用来存放 组件 的代码（packages）,一个用来存放 预览示例的网站 代码（examples）（这里直接把初始化模板的src目录更改为examples即可），一个用来存放 脚本 代码（build）
文件的名字可以根据自己喜好去命名。
完成一个组件
具体的代码组织方式可以查看Github上的源码，这里需要注意，我们尽量以组件名来命名文件夹名，然后在文件夹内新建index.vue组件。这么做是为了方便后面我们用代码直接生成index.js入口文件的内容。
样式文件的分离
为了更好的处理样式，我们把所有的样式文件单独处理（代码地址），这里主要用Gulp来处理任务。
发布NPM包
打包
当我们完成了一个组件，就可以打包了，打包很简单，这得益于vue-cli3的build命令引入了构建目标参数，只需执行
vue-cli-service build --target lib --name vue-cards --dest lib packages/index.js
就可以把packages下所有的代码以库模式打包出去。
在库模式中，Vue 是外置的。这意味着包中不会有 Vue，即便你在代码中导入了 Vue。如果这个库会通过一个打包器使用，它将尝试通过打包器以依赖的方式加载 Vue；否则就会回退到一个全局的 Vue 变量。
发布
发布之前，我们需要新增一个.npmignore文件，把一些不需要发布到npm包的文件或者文件夹都写在里面，写法和.gitignore一致。
具体怎么发布一个npm包这里就不在赘述了。
文档的编写和发布
编写
可能大多数人觉得写一个开源UI库最头疼的事情就是写文档，如何快速又优雅的构建出像ElementUI官网这类网站呢？
目前最流行的写文档的方式就是通过markdown编写，那我们要解决的就是如何将Markdown文档HTML化，直接展示在页面中。
这里我们可以用vue-markdown-loader插件，该插件的具体配置可以查看项目的vue.config.js文件。
具体到本项目的效果如图所示：
代码示例部分都是用
markdown编写的，其他部分则是普通的vue组件。
发布
我们可以利用GithubPages功能来发布我们的文档网站，具体的使用方法网上有很多教程，比如GitHub Pages 使用入门。
其实还有一种很简单的方式，可以用gh-pages这个工具，一键发布到对应仓库的gh-pages分支。具体配置和使用可以参考本项目的build/publish-docs.js文件。
提高开发效率的一些做法
在本项目的build文件夹下，有很多能够大大提升我们开发效率的文件，下面来一一讲解一下它们的用途。
get-components.js文件主要为了获取packages目录下所有的组件目录，为我们构建packages下的入口文件做准备。
build-entry.js文件主要是根据get-components.js的结果，然后将代码写入/packages/index.js，生成入口文件。
build-lib.js文件主要是做一些发布npm包前的构建准备，包括构建入口文件、构建库、构建样式文件等。
publish-docs.js文件的作用是可以一键发布文档到本仓库的gh-pages分支。
release.sh脚本文件主要是把一些发布npm包的命令集合在了一起，包括很多git和npm操作。
快速生成CHANGELOG
CHANGELOG我们可以自己手写MD文档，当然这并不明智。我们更希望的是用代码去自动化生成，原理无非就是提取你的git提交信息并写入文件，这里我们可以用conventional-changelog来生成CHANGELOG。为了生成更精细和正确的CHANGELOG文档，我们需要严格规范自己的提交记录，我们可以用conventional-changelog的标准提交记录：cz-conventional-changelog，具体的用法可以参考cz-cli。本项目的package.json的init脚本其实也封装了相关的脚本命令，可以参考。
参考
- vant - Lightweight Mobile UI Components built on Vue
- element - A Vue.js 2.0 UI Toolkit for Web
- vue - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
- 详解：Vue cli3 库模式搭建组件库并发布到 npm
关于
公众号搜索：前端不打烊，定期为你分享简单、实用且优质的前端知识。
