# Web-Component

**Repository Path**: idealmatrix/Web-Component

## Basic Information

- **Project Name**: Web-Component
- **Description**: 响应式前端组件库，基于 Quasar组件库实现的深度定制化前端组件库，配合Web Framework和低代码平台构建现代响应式应用
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-10-31
- **Last Updated**: 2025-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web-Component 
[![npm](https://img.shields.io/npm/v/vue.svg)](https://www.npmjs.com/package/vue) [![build status](https://github.com/vuejs/core/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/vuejs/core/actions/workflows/ci.yml)

🚀 **Web-Component** 是基于 [Quasar](https://quasar.dev/) 框架的扩展组件库，  
主要目标是 **统一组件属性标准化**，提供更简洁一致的 API，用于 **页面构建**。

通过该库，你可以在快速构建页面，而不必关心不同组件之间的差异化属性写法。  

---

## ✨ 功能特点

- 🔧 **基于 Quasar**：与 Quasar 保持兼容，扩展和二次封装常用组件  
- 📦 **属性标准化**：统一属性设计，降低低代码组装时的心智负担  
- 🏗 **支持业务扩展**：包含 **专用业务组件**，开箱即用  
- 🌍 **内置国际化**：支持多语言（i18n）  
- 🎨 **样式模块化**：全局样式与局部样式模块化管理  

---

## 📦 安装

```bash
# 克隆项目
git clone https://github.com/your-org/your-repo.git

# 安装依赖
npm install
```

---

## 🚀 快速开始

在 Vue 项目中引入并注册：

```ts
import { createApp } from 'vue'
import App from './App.vue'

// 引入特来电组件库
import TeldLowcodeUI from 'teld-lowcode-ui'
import 'teld-lowcode-ui/dist/style.css'

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

在页面中使用：

```vue
<template>
  <TldButton label="确认" color="primary" />
</template>
```

---

## 🔨 开发 & 构建

### 启动项目
```bash
npm start
```

### 代码检查 & 格式化
```bash
npm run lint       # lint 检查
npm run prettier   # 格式化
```

### 打包构建

- **esm 格式**（单文件）
```bash
npm run lib
```

- **esm 格式**（独立组件）
```bash
npm run lib-standalone
```

- **umd 格式**（单文件）
```bash
npm run lib-umd
```

- **umd 格式**（独立组件）
```bash
npm run lib-umd-standalone
```

---

## 📂 项目结构

```
├── components
│   ├── basic       # 基础组件（对原生组件二次封装）
│   ├── bussiness   # 业务组件（特来电专用）
│   ├── common      # 通用方法
│   ├── lang        # 国际化配置
│   └── style       # 样式
│
├── dist            # 构建输出
├── public          # 静态资源
├── src             # demo 源代码
│   ├── assets      # 静态资源
│   ├── views       # demo 页面
│   ├── layout      # 布局
│   ├── *.scss      # 全局样式
│   ├── *.module.scss # 局部样式
│   ├── menus.js    # 菜单配置
│   └── router      # 路由
```

## 组件列表
[具体内容](./docs/rendered-md/SUMMARY)

---

## 📜 License

[MIT](./LICENSE) © 特来电