DevNet

Appearance

介绍 ​

DevNet-form 是基于 element-plus & Vue3 面向配置的前端组件库，快速开发基础功能，可作为低代码平台的基础框架。

TIP

注意：本组件库的主要目标是实现前端UI组件，帮助快速开发前端页面，admin管理功能并不是本项目的重点。
你可以通过如下方式使用devnet-form

开发表单，快速高效 ​

1、只需简单编写json配置

js
const formOption= {
    columns: {
      tablekey: {
        title: "",
        type: "table",
        form: {
          col:{span:24}, 
          props:{          
            table:{
              columns:{                             
                name: {
                  title: "姓名",
                  type: "text",                                   
                  form:{                            
                    props:{
                      search:{
                        isSearch:true
                      }
                    }
                  }
                },
                regcap:{
                  title:'数字',
                  type:'number'                    
                },
                state:{
                  title:'状态',                 
                  type:'checkboxlist',
                  form:{
                    props:{                     
                      request:{
                          getDataRequest:(query)=>{
                            return {data:dictData}
                          }
                        }                    
                    }
                  }
                },
                regdate:{
                    title:'日期',
                    type:'datetime'                   
                },
                isadmin:{
                  title:'复选框',
                  type:'switch'
                },
                remark:{
                  title:'备注',
                  type:'textarea'
                }
              },
              data:[],
              tableToolbar:{
                show:true,
                title:'基础表格',
                buttons:{
                    add:{
                        show:true 
                    },
                    edit: {
                        show:true
                    },
                    delete:{
                        show:true
                    },                          
                }                                            
              } 
            },           
            request:{
                getDataRequest:(query)=>{                                  
                    var ret={data:[]};
                    ret.pageindex=query.pageIndex;
                    ret.pagesize=query.pageSize;
                    ret.rowcount=ret.data.length;
                    ret.pagecount=ret.data.length;      
                    return ret;
                }              
            },
            search:{
                show:true
            } 
          }       
        }
      }
    }
  }

2、 一个基础表格就出来了

特性 ​

1. Vue3特性 ​

  • 基于Vue3，开箱即用的中后台前端组件库

2. 面向配置开发 ​

  • 面向配置快速开发,可作为低代码平台基础框架

3. 模板组件 ​

  • 内置模板组件，快速开发

4. 多UI支持 ​

  • 支持 element-plus 、 Ant(敬请期待)

5. 国际化 ​

  • 多语言支持

6. 扩展插件 ​

  • 支持自定义组件扩展插件，灵活高效

请先了解 ​

Vue3 / element-plus 基础知识

1. Vue3 ​

Github: https://github.com/vuejs/vue-next
文档：https://v3.cn.vuejs.org/guide/introduction.html

2. element-plus ​

Github: https://github.com/element-plus/element-plus
文档：https://element-plus.org/#/zh-CN/component/installation