用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