用vue-cli3从0打造一个完整的UI库

前言

本文旨在给你们提供一种构建一个完整UI库脚手架的思路：包括如何快速并优雅地构建UI库的主页、如何托管主页、如何编写脚本提高本身的开发效率、如何生成CHANGELOG等等，这里提供了一个Demo可供你们参考：

在线Demo地址

GitHub源码地址

初始化目录结构

主流的开源UI库代码结构主要分为三大部分：

1. 组件库自己的代码：这部分代码会发布到npm上
2. 预览示例和查看文档的网站代码：相似Vant、ElementUI这类网站。
3. 配置文件和脚本文件：用于打包和发布等等

咱们先用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脚本其实也封装了相关的脚本命令，能够参考。

参考

1. vant - Lightweight Mobile UI Components built on Vue
2. element - A Vue.js 2.0 UI Toolkit for Web
3. vue - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
4. 详解：Vue cli3 库模式搭建组件库并发布到 npm