Sibionics-ui-h5 NPM

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');