UI-Lib 组件库

项目概述

lw-ui-lib 是一个基于 Vue 3 的轻量级 UI 组件库，提供常用的官网组件，所有组件均以 H 开头命名。

安装

npm install lw-ui-lib

快速开始

全局引入

import HUI from 'lw-ui-lib'
import 'lw-ui-lib/dist/style.css'

const app = createApp(App)
app.use(HUI)
app.mount('#app')

按需引入

import { HButton, HCard } from 'lw-ui-lib'

组件列表

| 组件名称 | 功能描述 | | --------- | -------------------- | | HHeader | 网站顶部导航栏组件 | | HFooter | 网站底部信息组件 | | HBanner | 轮播图或广告横幅组件 | | HCard | 卡片式内容展示组件 | | HButton | 自定义按钮组件 | | HInput | 输入框组件 | | HModal | 模态框组件 |

使用示例

HButton 示例

<HButton :dataMap="{ label: '点击我', disabled: false }" @click="handleClick" />

HCard 示例

<HCard :dataMap="{ title: '标题', description: '描述内容' }" />

HInput 示例

<HInput v-model="inputValue" placeholder="请输入内容" />

HModal 示例

<HModal v-model="isModalVisible" title="提示" content="这是一个模态框示例" />

配置文件说明

config.js 文件用于全局配置组件库的行为，例如主题、默认语言等。

配置示例

// src/components/config.js
export default {
  theme: 'light', // 可选值: 'light', 'dark'
  language: 'zh-CN', // 可选值: 'zh-CN', 'en-US'
  defaultButtonSize: 'medium' // 可选值: 'small', 'medium', 'large'
}

使用配置

import config from 'lw-ui-lib/config'

// 动态修改配置
config.theme = 'dark';

开发指南

1. 组件开发：所有组件位于 src/components 目录下，命名以 H 开头。
2. 动态传值：组件支持通过 dataList 或 dataMap 动态渲染内容。
3. 导出规则：组件库通过 src/index.js 自动导出所有组件。
4. 样式规范：组件样式使用 SCSS 编写，统一在 src/styles 目录下管理。

贡献

欢迎提交 Pull Request 或 Issue 改进组件库！