前言

本文旨在給大家提供一種構建一個完整UI庫腳手架的思路：包括如何快速并優雅地構建UI庫的主頁、如何托管主頁、如何編寫腳本提升自己的開發效率、如何生成CHANGELOG等等，這里提供了一個Demo可供大家參考：

在線Demo地址

GitHub源碼地址

初始化目錄結構

主流的開源UI庫代碼結構主要分為三大部分：

組件庫本身的代碼：這部分代碼會發布到npm上

預覽示例和查看文檔的網站代碼：類似Vant、ElementUI這類網站。

配置文件和腳本文件：用于打包和發布等等

我們先用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

轉載于:https://juejin.im/post/5c934511f265da60d82dc7ab

總結

以上是生活随笔為你收集整理的用vue-cli3从0打造一个完整的UI库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。