用vue-cli3從0打造一個完整的UI庫

ShuaiKangZhang發表於2019-03-21
VueUI

前言

本文旨在給大家提供一種構建一個完整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檔案。 具體到本專案的效果如圖所示：

用vue-cli3從0打造一個完整的UI庫
程式碼示例部分都是用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

相關文章