本文旨在給大家提供一種構建一個完整 UI 庫腳手架的思路：包括如何快速并優(yōu)雅地構建UI庫的主頁、如何托管主頁、如何編寫腳本提升自己的開發(fā)效率、如何生成 CHANGELOG 等

前言

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

編寫此博文的靈感 UI 框架庫（ vue-cards ）,PS:此 UI框架庫相對于Vant、ElementUI會比較簡單點，可以作為一份自定義UI框架庫的入坑demo，同時這篇博文也是解讀這份 UI 框架庫的構建到上線的一個過程

前置工作

以下工作全部基于 Vue CLI 3.x，所以首先要保證機子上有 @vue/cli

vue create vtp-component # vtp-component 作為教學的庫名vue-router , dart-sass , babel , eslint 這些是該項目使用的依賴項，小主可以根據(jù)自己的需求進行相應的切換

start

開始造輪子了

工作目錄

在根目錄下新增四個文件夾，一個用來存放組件的代碼（packages）,一個用來存放 預覽示例的網(wǎng)站 代碼（examples）（這里直接把初始化模板的 src 目錄更改為 examples 即可，有需要的話可以將該目錄進行清空操作，這里就不做過多的說明），一個用來存放編譯腳本代碼（build）修改當前的工作目錄為以下的格式嗎，一個用來存放自定義生成組件和組件的說明文檔等腳本（scripts）

|--- build     
|
|--- examples
|
|--- packages
|

|--- scripts

讓 webpack 編譯 examples

由于我們將 src 目錄修改成了 examples，所以在 vue.config.js 中需要進行相應的修改

const path = require('path')function resolve (dir) { return path.join(__dirname, dir)}module.exports = { productionSourceMap: true, // 修改 src 為 examples pages: { index: {  entry: 'examples/main.js',  template: 'public/index.html',  filename: 'index.html' } }, chainWebpack: config => { config.resolve.alias  .set('@', resolve('examples')) }}

添加編譯腳本

package.json

其中的組件 name 推薦和創(chuàng)建的項目名一致

{ "scripts": { "lib": "vue-cli-service build --target lib --name vtp-component --dest lib packages/index.js" }}

修改 main 主入口文件

{ "main": "lib/vtp-component.common.js"}

一個組件例子

創(chuàng)建組件和組件文檔生成腳本

在 scripts 中創(chuàng)建以下幾個文件，其中 create-comp.js 是用來生成自定義組件目錄和自定義組件說明文檔腳本， delete-comp.js 是用來刪除無用的組件目錄和自定義組件說明文檔腳本， template.js 是生成代碼的模板文件