Sibionics-ui-next NPM

sibionics-ui-next

sibionics-ui-next 是什么？

框架介绍

sibionics-ui-next 是基于vue@3.x + element-plus@2.x开发的一个UI框架，其核心组件是围绕Table表格、Form 表单及FormItem 表单项封装的极具便利性的SibTable、SibFrom、SibItem；其中还包含许多便利性的方法。该框架的核心目的是以高效的配置来驱动业务视图，从而使得开发者在后台管理项目开发过程中的开发效率得到大幅的提升。

框架优点

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

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

它能解决什么问题？

将 Vue 的核心理念以数据驱动视图升华为以配置驱动视图

以往，当我们在写一个form 表单时，由于表单项类型不一样，有的是下拉框，有的是选择器，有的是输入框等等，导致我们不太方便使用 v-for，而不得不根据每一个表单项去编写其对应的template。之后，我希望通过这个框架能够做到使我们再也不必去关注 <el-form>、<el-form-item>、<el-checkbox>等代码的编写，也不用管模板层到底如何遍历，我们只需要提供自己想要生成的对应表单的配置项，便可自动生成相关模块。当然，框架内提供了丰富的配置字段和插槽入口，用以实现特殊拓展。同样地，在编写列表增删改查的页面时，该框架也做了极具便利的组件封装，使用<sib-table>组件来编写后台管理系统相关页面，是真真实实的能使你事半功倍

能够实现自处理后端接口的调用，告别繁琐的接口请求逻辑的编写

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

快速使用

npm安装

npm i sibionics-ui-next -S

yarn安装

yarn add sibionics-ui-next

浏览器直接引入

<head>
    <!-- 引入 element-plus 样式 -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"></link>
    <!-- 引入 sibionics-ui-next 样式 -->
    <link rel="stylesheet" href="//unpkg.com/sibionics-ui-next/lib/index.css"></link>
    <!-- 引入 Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- 引入 element-plus -->
    <script src="//unpkg.com/element-plus"></script>
    <!-- 引入 element-plus 图标库 -->
    <script src="//unpkg.com/@element-plus/icons-vue"></script>
    <!-- 引入 sibionics-ui-next 组件库 -->
    <script src="//unpkg.com/sibionics-ui-next"></script>
</head>

<body>
    <div id="app">
        <sib-item v-model="value" :props="props"></sib-item>
    </div>
    <script>
        console.log(Vue);
        console.log(ElementPlus);
        console.log(ElementPlusIconsVue);
        console.log(sibui);
        
        const app = Vue.createApp({
            setup() {
                const props = Vue.reactive({
                    label: '输入框',
                    type: 'text',
                    prefixIcon: 'Search',
                });
                const value = Vue.ref('6666');
                
                return { props, value };
            },
        });

        // 注册 ElementPlus 图标组件
        Object.keys(ElementPlusIconsVue).forEach((key) => app.component(key, ElementPlusIconsVue[key]));
        app.use(ElementPlus).use(sibui).mount('#app');
    </script>
</body>

main.js

import { createApp } from 'vue';
// 引入 element-plus
import ElementPlus from 'element-plus';
// 引入 element-plus 样式文件
import 'element-plus/dist/index.css';
// 引入 element-plus 图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
// 引入 sibionics-ui-next
import sibionics from 'sibionics-ui-next';
// 引入 sibionics-ui-next 样式文件
import 'sibionics-ui-next/lib/index.css';

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

const app = createApp(App);

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

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

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