# xwb-ui

**Repository Path**: tongchaowei/xwb-ui

## Basic Information

- **Project Name**: xwb-ui
- **Description**: 小尾巴 UI 组件库，基于 Vue 3 构建
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-06
- **Last Updated**: 2023-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, UI, 组件库

## README

# 小尾巴 UI
## 组件库地址
- npm：[https://www.npmjs.com/package/xwb-ui?activeTab=readme](https://www.npmjs.com/package/xwb-ui?activeTab=readme)
- 小尾巴 UI 组件库源码 gitee：[https://gitee.com/tongchaowei/xwb-ui](https://gitee.com/tongchaowei/xwb-ui)
- 小尾巴 UI 组件库测试代码 gitee：[https://gitee.com/tongchaowei/xwb-ui-test](https://gitee.com/tongchaowei/xwb-ui-test)
## 下载

- npm
```bash
npm i xwb-ui
```

- pnpm
```bash
pnpm i xwb-ui
```

- yarn
```bash
yarn add xwb-ui
```
## UI 样式配置

- 在 main.js / main.ts 文件中，引入组件库 UI 样式
```javascript
import 'xwb-ui/style.css' // 导入小尾巴 UI 样式
```
## 引入 UI 组件库
### 按需引入
```javascript
import {
  // 组件名
} from 'xwb-ui'
```
### 完整引入

- 通过 UI 组件库中内置的插件 XWB_UI，将组件库中所有组件注册为全局组件
```javascript
import {createApp} from 'vue'
import App from './App.vue'

import 'xwb-ui/style.css' // 导入小尾巴 UI 样式
import XWB_UI from 'xwb-ui' // 导入将组件库中所有组件注册为全局组件的插件

const app = createApp(App)

// 使用 XWB_UI 插件
app.use(XWB_UI)

app.mount('#app')
```
## 各组件说明与使用
- 对于各组件的说明与使用，请参考：[[构建自己的 Vue 组件库] 小尾巴 UI 组件库](https://blog.csdn.net/m0_53022813/article/details/132770038)