Vbd-component-library NPM

vbd-component-library ⚡

Vue3 UI Components Library

注：该仓库主要记录从 0 搭建一个组件库的方法，包括组件文档的编写

克隆代码到本地

# gitee
git clone http://8.141.73.82:8201/front-component-library/vbd-component-library.git

安装依赖

pnpm install

命令介绍

# 本地开发环境
pnpm docs:dev

# 打包组件库
pnpm build

# 发布到 npm，tips: 需要将npm的registry切换到原始的（https://registry.npmjs.org/）并提前登录
pnpm release

# 工具命令: 创建要开发的组件，此命令回创建组件的基本文件和添加文档
pnpm gen ComponentName

# 工具命令: 删除组件，会删除与该组件相关的文件和文档
pnpm del ComponentName

⚡ 使用说明

安装依赖

npm install vbd-component-library

全局注册

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// main.ts
import { createApp } from 'vue'
import 'vbd-component-library/dist/style.css'
import VbdComponentLibrary from 'vbd-component-library'
import App from './App.vue'

createApp(App).use(VbdComponentLibrary).mount('#app')

使用

<vbd-button>Default</vbd-button>
<vbd-button type="primary">Primary</vbd-button>
<vbd-button type="success">Success</vbd-button>
<vbd-button type="info">Info</vbd-button>
<vbd-button type="warning">Warning</vbd-button>
<vbd-button type="danger">Danger</vbd-button>

组件中直接使用

<template>
  <VbdButton>Default</VbdButton>
</template>

<script setup lang='ts'>
import { VbdButton } from 'vbd-component-library'
</script>

浏览器直接引入

直接通过浏览器的 HTML 标签导入 vbd-component-library，然后就可以使用全局变量 ESDrager 了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/vbd-component-library/dist/style.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <vbd-button>Default</vbd-button>
    <vbd-button type="primary">Primary</vbd-button>
    <vbd-button type="success">Success</vbd-button>
    <vbd-button type="info">Info</vbd-button>
    <vbd-button type="warning">Warning</vbd-button>
    <vbd-button type="danger">Danger</vbd-button>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/vbd-component-library"></script>
  <script>
    const { createApp } = Vue
    const app = createApp({})
    app.use(vbd-component-library)
    app.mount('#app')
  </script>
</body>
</html>

vbd-component-library

@everything-registry/sub-chunk-3044

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago