# QiDian-Ui

**Repository Path**: qishu-software/qi-dian-ui

## Basic Information

- **Project Name**: QiDian-Ui
- **Description**: 高颜值移动端 VUE 组件库，部分场景依赖以下插件开发：
- Swiper
- DayJs
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-26
- **Last Updated**: 2024-06-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# QiDian UI

#### 介绍

高颜值移动端 VUE 组件库

#### 软件架构

基于TypeScript 与 Vue 框架开发，部分场景依赖以下插件：

- Swiper
- DayJs

#### 安装教程

```bash
# 通过 yarn 安装
yarn add qidian-ui

# 通过 pnpm 安装
pnpm add qidian-ui

# 通过 Bun 安装
bun add qidian-ui
```

#### 使用说明

##### 全局注册 `main.js`

全局注册后，您可以在 app 下的任意子组件中使用，适用于注册高复用率的组件。

```js
import { createApp } from 'vue'
...
/* top.1.2 按需导入 */ import { Button, Cell, ... } from 'qidian-ui'
/* top.1.1 全部导入 (不推荐) */ import QiDianUi from 'qidian-ui'
...
const app = createApp({})
...
/* top.1.2 按需注册 */ app.use(Button).use(Cell).use(...)
/* top.2.1 全部注册 (不推荐) */ app.use(QiDianUi)

// 注册完成后即可在模板中使用，使用方式请参考对应组件说明
...
app.mount('#app')
```

##### 局部注册 `components`

当前方法适用于 vue 的选项式 api，局部注册后，你可以在当前组件中使用注册的 Vant 组件。

```js
import { Button, Cell, ... } from 'qidian-ui'

export default {
  components: {
    [Button.name]: Button,
    [Cell.name]: Button,
    ...
  },
};
```

##### 局部注册 `<script setup>`

当前方法适用于 vue3 的 `<script setup>` 语法糖，在 `<script setup>` 中您可以直接使用导入并使用 QiDian UI 组件，不需要进行组件注册。

```vue
<script setup>
  import { Button, Cell, ... } from 'qidian-ui'
</script>

<template>
  <Button ></Button>
  <Cell ></Cell>
  ...
</template>
```

::: warning 组件注册说明
关于vue模板语法组件注册的详细介绍，请参考 [Vue 官方文档 - 组件注册](https://cn.vuejs.org/guide/components/registration.html#global-registration)。
:::

##### JSX/TSX

在 `xx.jsx / xx.tsx` 文件中您可以直接使用导入并使用 QiDian UI 组件，不需要进行组件注册。

```jsx
import { Button, Cell, ... } from 'qidian-ui';

export default {
  render() {
    return <Button />;
    <Cell />;
    ...
  },
};
```

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request