README

v-ui-template

中文 | ENGLISH

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!

Documentation

Features

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

download

# 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

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

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

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.md -->
# Select

Test component

<v-select></v-select>

Usage no npm install needed!