分享一个创建Vue 组件库的库

你可以使用该项目快速创建基于vue 3.0的组件库。 这是生成 vue 组件库的超快、超简单的一种方式！

功能特点

• 通过命令快速添加新组件
• 所有组件默认支持按需加载
• 可自定义组件前缀，避免组件名称、样式冲突
• 支持组件库文档生成

脚本命令

详细命令参考package.json的scripts部分

# 安装依赖
npm install

# 添加新组件
npm run gen component-name

# 打包你的组件库
npm run  build

# 检查代码规范
npm run  lint

# 生成日志文件发布新版本
npm run  release

# 生成文档相关命令
npm run  docs:build

下载

# git clone
git clone https://github.com/ckpack/v-ui-template.git

# download zip
https://github.com/ckpack/v-ui-template/archive/refs/heads/main.zip

全局替换变量

• v-ui-template 为 you-project-name 如 b-ui
• ckpack 为 you-github-username 如 my-github-username

修改组件前缀

默认组件前缀是V,你可以选择修改组件前缀
修改文件src/defaultConfig.js

// 修改iife格式时的ouput, 如`BUI`
export const NAME = 'BUI'; 
// 修改默认组件前缀， 如`B`
export const COMPONENT_PREFIX = 'B';

默认组件类前缀是v-,你可以选择修改组件类前缀
修改文件src/styles/__variables.scss

// 修改默认组件类前缀如`b-`
$cls-prefix: b- !default;

开始创建组件

使用 npm run gen component-name添加新组件，如执行npm run gen select命令，该命令会在src/components/目录下生成select文件目录，编辑文件夹下的select.vue文件以及index.scss文件

预览新生成的组件

在文件dev/app.vue中引入新组件, 执行npm run dev预览新组件

<template>
  <div id="app">
    <ConfigProvider>
+      <Select></Select>
    </ConfigProvider>
  </div>
</template>
<script setup>
import {
+  ConfigProvider, Select,
} from '../src';
</script>

添加新组件文档

在docs/guide/compoents文件夹下添加对应组件名的文档，执行npm run docs:dev预览文档

<!-- docs/guide/compoents/select.md -->
# Select

测试组件

<v-select></v-select>