# web-ui

**Repository Path**: guorui999/web-ui

## Basic Information

- **Project Name**: web-ui
- **Description**: web-ui
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-30
- **Last Updated**: 2025-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ljd-ui

## Recommended IDE Setup

## 使用

### 链接引入

```html
<link rel="stylesheet" href="http:xxx:xx/ljd-ui/index.css" />
<script src="http:xxx:xx/ljd-ui/index.js"></script>
```

### 全局注册

/main.js

> 全局注册使用组件必须是小写: l-button

```js
import { createApp } from 'vue'
import App from './App.vue'
import ljdUI from '../public/ljd-ui/index'
import '../public/ljd-ui/index.css'

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

### 按需引入

```html
<l-button>按钮</l-button>
<script setup>
  import { components } from '/public/ljd-ui/index'
  import '/public/ljd-ui/index.css'

  const { LButton } = components
</script>
```

## 测试

### 本地测试

yarn dev 运行

App.vue 使用

```html
<template>
  <div>
    <l-button>按钮组件</l-button>
    <l-button style="margin-left: 12px" disabled>按钮组件</l-button>
  </div>
</template>
```

### 跨项目测试

先 yarn build 打包

```html
<template>
  <LButton>按钮</LButton>
</template>

<script setup>
  import { components } from 'D:/projects/ljd-web-component/ljd-ui/index'
  import 'D:/projects/ljd-web-component/ljd-ui/index.css'

  const { LButton } = components
</script>
```

## 新建组件

- 组件目录
  src/components 基础组件
  src/business 业务组件

### svg图标

直接放到/src/assets/icons目录下,?mask是为了加颜色

> 使用 `<div class="i-icon-图标名?mask"></div>`

## 颜色变量、主题、ant样式

### 颜色变量

> src\styles\theme.variable.scss
> src\styles\theme.module.scss 导出变量

### 主题色

> src\styles\themeConfig.ts

### 设置暗色主题

> src\components\configProvider\index.vue

### 修改 ant design vue 默认样式

> src\styles\antd.scss

## 组件文档

运行 yarn docs:dev
打包 yarn docs:build
打包后查看 yarn docs:serve

### 配置菜单和路由

> /docs/.vitepress/config.js

### 添加组件

> /docs/components/button/index.md

文档示例

````md
# Button 按钮

## 代码演示

:::demo

```vue
<template>
  <l-button type="primary" style="margin-right: 10px">按钮</l-button>
  <l-button type="ghost" style="margin-right: 10px">按钮</l-button>
  <l-button type="dashed" style="margin-right: 10px">按钮</l-button>
  <l-button type="link" style="margin-right: 10px">按钮</l-button>
  <l-button type="text" style="margin-right: 10px">按钮</l-button>
  <l-button type="default" style="margin-right: 10px">按钮</l-button>
</template>
```

:::

## API

### 属性

| <div style="width:135px">参数</div> | <div style="width:135px">说明</div> | <div style="width:135px">类型</div> | <div style="width:135px">默认值</div> |
| ----------------------------------- | ----------------------------------- | ----------------------------------- | ------------------------------------- |
| type                                | 按钮类型                            | string                              | 'default'                             |

### 事件

| <div style="width:185px">事件名称</div> | <div style="width:185px">说明</div> | <div style="width:205px">参数类型</div> |
| --------------------------------------- | ----------------------------------- | --------------------------------------- |
| click                                   | 点击按钮时的回调                    | (event) => void                         |

```

```
````