Share a library to create a vue component library

You can use this project to quickly create a component library based on vue 3.0. This is a super fast and super simple way to generate vue component library!


  • Quickly add new components via commands

  • All components support on-demand loading by default

  • Customizable component prefix to avoid component name and style conflicts

  • Support component library document generation

Script commands

For detailed commands, refer to the scripts part of package.json

# Installation dependencies

npm install

# Add new component

npm run gen component-name

# Package your component library

npm run build

# Check the code specification

npm run lint

# Generate log file to release new version

npm run release

# Generate documentation related commands

npm run docs:build


# git clone

git clone

# download zip

Global replacement variables

  • v-ui-template is you-project-name such as b-ui

  • ckpack is you-github-username such as my-github-username

Modify component prefix

The default component prefix is ​​V, you can choose to modify the component prefix

Modify the file src/defaultConfig.js

// modify the ouput when iife format, such as `BUI`

export const NAME ='BUI';

// Modify the default component prefix, such as `B`

export const COMPONENT_PREFIX ='B';

The default component class prefix is ​​v-, you can choose to modify the component class prefix

Modify the file src/styles/__variables.scss

// Modify the default component class prefix such as `b-`

$cls-prefix: b- !default;

Start creating components

Use npm run gen component-name to add new components. For example, execute the npm run gen select command, which will generate the select file directory under the src/components/ directory, and edit the select under the folder. vuefile andindex.scss` file

Preview the newly generated components

Introduce new components in the file dev/app.vue, execute npm run dev to preview the new components


<div id="app">


+ <Select></Select>




<script setup>

import {

+ ConfigProvider, Select,

} from'../src';


Add new component document

Add the document corresponding to the component name in the docs/guide/compoents folder, execute npm run docs:dev to preview the document

<!-- docs/guide/compoents/ -->

# Select

Test component