Epage 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Epage 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Epage 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 罗奇奇
适用人群 未知
收录时间 2023-06-30

软件简介

Epage 是一款基于 schema 的可视化页面配置工具。可基于流行的前端组件库配置表单、页面等。

演示地址

安装

此库提供设计器界面及基本交互,是pc端设计器核心依赖,移动端渲染器可以不依赖此库。widget能力及工具面板内容需配合渲染器一起使用,如epage-iview,用户最终使用仅使用渲染器包即可。

开发移动端渲染的话可以直接引入epage-core即可(因为仅完成渲染功能即可,不需要拖动配置界面)。

开发自定义widget推荐通过脚手架 epage-cli 方式创建

# 全局安装
npm i -g epage-cli
# 初始化项目
epage init myWidgets
cd myWidgets
# 启动
npm start
# 需提前安装vue vuex iview vuedraggable
npm install epage -S
# 或者 yarn add epage

仓库更新说明

本仓库为Epage渲染器Epage设计器核心依赖,更新日志查看CHANGLOG

更多Epage渲染器及相关工具参见:https://github.com/epage-team

设计器及渲染器示例

import { render } from 'epage-core'
import Epage from 'epage'
import pcWidgets, { entry as PCEntry } from 'epage-iview'
import h5Widgets, { entry as H5Entry } from 'epage-vant'
import 'iview/src/styles/index.less';
import 'vant/lib/index.less' /* 双端设计才需要 */
import 'epage/src/style/main.less'
import 'epage-iview/src/style/main.less'
import 'epage-vant/src/style/main.less' /* 双端设计才需要 */

const el = document.getElementById('root')
// 实例化设计器,Render为渲染器,widgets为待注册的页面部件
// 关于 Render 和 widgets,可以访问 https://github.com/epage-team/epage-iview
const config = {
  el,
  pc: {
    widgets: pcWidgets,
    Render: render.VueRender,
    component: PCEntry
  },
  // 移动端同时设计时才需要
  h5: {
    widgets: h5Widgets,
    Render: render.VueRender,
    component: H5Entry
  }
}
new Epage(config)

更多用法参考CHANGELOG#v0.7.0

epage-iview 为基于 iview 组件库的 epage 渲染器实现

设计理念

通过schema方式描述页面功能、展示及交互,以可视化方式配置生成schema,最终生成页面。

项目起源于流程表单场景,定制开发每一个表单成本太高且维护性差,最主要是实施人员希望通过可视化方式配置生成表单。基于此场景,在开发中我们发现,表单场景与其他一些页面(如列表页、详情页、图表报表等)场景非常相似,都应该可以通过可视化方式配置出来,从而达到组件复用、灵活配置、方便维护等效果。在使用过程中,业务的复杂远不是基础组件能覆盖的,于是要求需要具备很强的扩展性,以便定制业务组件,有些项目甚至还使用了不同前端框架。

epage的设计器及渲染器分别基于原生dom节点设计,使得设计器及渲染器分离,结合统一的schema规范,实现一次设计多处渲染。关于如何定制开发widget可以访问 如何开发widget?

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
2 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部