使用 Vue cli 3.0 构建自定义组件库的方法

本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路：包括如何快速并优雅地构建UI库的主页、如何托管主页、如何编写脚本提升自己的开发效率、如何生成 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 这些是该项目使用的依赖项，小主可以根据自己的需求进行相应的切换

start

开始造轮子了

工作目录

在根目录下新增四个文件夹，一个用来存放组件的代码（packages）,一个用来存放 预览示例的网站 代码（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 推荐和创建的项目名一致

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

修改 main 主入口文件

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

一个组件例子

创建组件和组件文档生成脚本

在 scripts 中创建以下几个文件，其中 create-comp.js 是用来生成自定义组件目录和自定义组件说明文档脚本， delete-comp.js 是用来删除无用的组件目录和自定义组件说明文档脚本， template.js 是生成代码的模板文件