# sibionics-ui-h5

> A Component Library for Vue3 based on vant@4.3.1

Latest version **1.1.4** (published 2023-09-14) · 0 weekly downloads

## Install

```sh
npm install sibionics-ui-h5
pnpm add sibionics-ui-h5
yarn add sibionics-ui-h5
bun add sibionics-ui-h5
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2023-09-14 |
| First published | 2023-05-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 504.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | BearSee（熊望） |
| Maintainers | bearsee |

## Links

- npm: https://www.npmjs.com/package/sibionics-ui-h5
- Homepage: http://www.bearsee.com.cn/sibionics-ui-h5
- npm.io page: https://npm.io/package/sibionics-ui-h5

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.47
- [vant](https://npm.io/package/vant.md) ^4.1.0
- [nprogress](https://npm.io/package/nprogress.md) ^0.2.0

## Recent versions

- 1.1.4 (latest) — 2023-09-14
- 1.1.3 — 2023-07-19
- 1.1.2 — 2023-07-13
- 1.1.1 — 2023-07-12
- 1.1.0 — 2023-06-27
- 1.0.1 — 2023-05-31
- 1.0.0 — 2023-05-18

## README

# sibionics-ui-h5

## Sibionics-UI-H5 是什么？
### 框架介绍
Sibionics-UI-H5是基于Vue@3.x + Vant@4.x开发的一个UI框架， 其核心组件是围绕Form 表单及FormItem 表单项 封装的极具便利性的SibFrom、SibItem；其中还包含许多便利性的方法。 该框架的核心目的是以高效的配置来驱动业务视图，从而使得开发者在h5项目开发过程中的开发效率得到大幅的提升。

### 框架优点
- 简单、灵活、轻便、高效
- 维护成本低
- 不必关注数据请求过程

它能够大幅减少了开发过程中的代码量，尤其是模板层；同时，组件内部封装了大量常用基础逻辑，也支持外部灵活配置调整，便利程度比较高；
框架核心目的是希望使用配置参数生成页面模块，对照API使用开发，能大幅提升开发效率，并且API接口言简意赅，使用简单； 并且它的出现也能够降低组件的维护成本，以往将组件库初始化到每个项目的 components 内，然而当组件进行bug修复或者迭代更新时，往往会出现维护困难的问题；
框架内部在对数据进行接口请求做了较好的封装，大部分组件内置了接口请求逻辑，只需要配置相关axios支持的参数，即可自动请求接口获取数据并渲染；

### 它能解决什么问题？
### 将 Vue 的核心理念 以数据驱动视图 升华为 以配置驱动视图
以往，当我们在写一个form 表单时，由于表单项类型不一样，有的是下拉框，
有的是选择器，有的是输入框等等，导致我们不太方便使用 v-for，
而不得不根据每一个表单项去编写其对应的template。
之后，我希望通过这个框架能够做到使我们再也不必去关注
<van-form>、<van-field>、<van-checkbox>等代码的编写，
也不用管模板层到底如何遍历，我们只需要提供自己想要生成的对应表单的配置项，便可自动生成相关模块。
当然，框架内提供了丰富的配置字段和插槽入口，用以实现特殊拓展。

### 能够实现自处理后端接口的调用，告别繁琐的接口请求逻辑的编写  
  
在代码编写过程中，一般会存在较多与后端交互的场景。例如某个下拉框的值是从后台接口获取。 在以往，我们使用的方式一般是声明获取数据的function，在该方法里调用后端接口获取相关数据，然后修改变量的值，渲染视图。 这样的做法在我看来属实过于僵硬。因此，框架内部所有涉及到接口请求的地方，均提供requestConfig字段用于声明接口请求的相关配置， 如果你配置了requestConfig，那么你再也不需要手动去获取数据然后再去赋值了，也无需关注内部针对接口调用所做的一切操作， 更不必担心它达不到你预期的效果，因为该字段除了支持预定义的内置参数，同时还支持接收axios所有可配置参数。


## 快速使用
### npm安装
`
npm i sibionics-ui-h5 -S
`

### yarn安装
`
yarn add sibionics-ui-h5
`
### 浏览器直接引入
```
<head>
    <!-- 引入 Vant 样式 -->
    <link rel="stylesheet" href="//unpkg.com/vant@4/lib/index.css"></link>
    <!-- 引入 sibionics-ui-h5 样式 -->
    <link rel="stylesheet" href="//unpkg.com/sibionics-ui-h5/lib/index.css"></link>
    <!-- 引入 Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- 引入 Vant 4 -->
    <script src="//unpkg.com/vant@4"></script>
    <!-- 引入 sibionics-ui-h5 组件库 -->
    <script src="//unpkg.com/sibionics-ui-h5"></script>
</head>
<body>
    <div id="app">
        <sib-item v-model="something" :prop="{ label: '123', type: 'text' }"></sib-item>
    </div>
    <script>
        console.log(Vue);
        console.log(vant);
        console.log(sibui);
        const app = Vue.createApp({
            data() {
                return {
                    prop: {
                        label: '输入框',
                        type: 'text',
                    },
                    value: '6666',
                }
            },
        });

        app.use(vant).use(sibui).mount('#app');
    </script>
</body>
```
### main.js
```
import { createApp } from 'vue';
// 引入 vant
import vant from 'vant';
// 引入 vant 样式文件
import 'vant/lib/index.css';
// 引入 sibionics-ui-h5
import sibionics from 'sibionics-ui-h5';
// 引入 sibionics-ui-h5 样式文件
import 'sibionics-ui-h5/lib/index.css';

import axios from 'axios';
import App from './App';

const app = createApp(App);

// 将 $axios 注册为全局提供者
// 以保证组件内部的自动请求接口获取数据的相关功能正常运行
app.provide('$axios', axios);

app.use(vant).use(sibionics).mount('#app');

```


## UI演示文档地址
See [Sibionics-ui-h5](http://www.bearsee.com.cn/sibionics-ui-h5).

## 项目运行环境
### node 14.6.0
### npm 6.14.6

---
_Source: https://npm.io/package/sibionics-ui-h5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._