玩转Create-Vant-Cli-App构建UI组件库的那些事

前言

最近在探索如何构建UI组件库，发现了一个很好用的库create-vant-cli-app，基本满足了UI组件库开发的需求。运行yarn dev后，项目中的md自动生成文档，又有内嵌的demo页面方便调试，非常方便。使用过程中也遇到了一些问题，我做了一些梳理，希望能帮助到各位。

项目安装

首先，你需要安装create-vant-cli-app：

npm install -g create-vant-cli-app

然后，创建一个新的项目：

create-vant-cli-app my-component-library

项目结构

create-vant-cli-app生成的项目结构如下：

my-component-library/
  |——docs/            // 文档目录
  |——packages/        // 组件目录
  |——scripts/         // 脚本目录
  |——src/             // 源代码目录
  |——style/           // 样式目录
  |——test/            // 测试目录
  |——theme.config.js  // 主题配置文件
  |——package.json    // 项目配置文件
  |——README.md       // 项目说明文档

组件开发

在packages目录中，你可以创建你的组件。每个组件都是一个单独的目录，其中包含组件的源代码、样式和测试代码。

packages/
  |——button/
  |——|——index.vue    // 组件源代码
  |——|——style.less   // 组件样式
  |——|——test.js      // 组件测试代码

文档生成

运行yarn dev后，项目中的md自动生成文档，你可以通过访问http://localhost:8080来查看文档。

内嵌Demo页面

create-vant-cli-app还提供了一个内嵌的demo页面，你可以通过访问http://localhost:8080/demo来查看。demo页面展示了所有组件的使用方法，非常方便。

遇到的一些问题

在使用create-vant-cli-app构建UI组件库时，我遇到了一些问题，现将这些问题罗列如下：

• 样式分离： create-vant-cli-app使用less作为样式预处理器，但是默认情况下，组件的样式都是内联的。为了实现样式分离，你需要在组件的index.vue文件中添加