Epage可視化頁面配置工具
Epage 是一款基于 schema 的可視化頁面配置工具。可基于流行的前端組件庫配置表單、頁面等。
演示地址
安裝
此庫提供設(shè)計(jì)器界面及基本交互，是pc端設(shè)計(jì)器核心依賴，移動端渲染器可以不依賴此庫。widget能力及工具面板內(nèi)容需配合渲染器一起使用，如epage-iview，用戶最終使用僅使用渲染器包即可。
開發(fā)移動端渲染的話可以直接引入epage-core即可（因?yàn)閮H完成渲染功能即可，不需要拖動配置界面）。
開發(fā)自定義widget推薦通過腳手架 epage-cli 方式創(chuàng)建
# 全局安裝 npm i -g epage-cli # 初始化項(xiàng)目 epage init myWidgets cd myWidgets # 啟動 npm start
# 需提前安裝vue vuex iview vuedraggable npm install epage -S # 或者 yarn add epage
倉庫更新說明
本倉庫為Epage渲染器及Epage設(shè)計(jì)器核心依賴，更新日志查看CHANGLOG。
更多Epage渲染器及相關(guān)工具參見：https://github.com/epage-team。
設(shè)計(jì)器及渲染器示例
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' /* 雙端設(shè)計(jì)才需要 */ import 'epage/src/style/main.less' import 'epage-iview/src/style/main.less' import 'epage-vant/src/style/main.less' /* 雙端設(shè)計(jì)才需要 */ const el = document.getElementById('root') // 實(shí)例化設(shè)計(jì)器，Render為渲染器，widgets為待注冊的頁面部件 // 關(guān)于 Render 和 widgets，可以訪問 https://github.com/epage-team/epage-iview const config = { el, pc: { widgets: pcWidgets, Render: render.VueRender, component: PCEntry }, // 移動端同時設(shè)計(jì)時才需要 h5: { widgets: h5Widgets, Render: render.VueRender, component: H5Entry } } new Epage(config)
更多用法參考CHANGELOG#v0.7.0
epage-iview 為基于 iview 組件庫的 epage 渲染器實(shí)現(xiàn)
設(shè)計(jì)理念
通過schema方式描述頁面功能、展示及交互，以可視化方式配置生成schema，最終生成頁面。
項(xiàng)目起源于流程表單場景，定制開發(fā)每一個表單成本太高且維護(hù)性差，最主要是實(shí)施人員希望通過可視化方式配置生成表單。基于此場景，在開發(fā)中我們發(fā)現(xiàn)，表單場景與其他一些頁面（如列表頁、詳情頁、圖表報(bào)表等）場景非常相似，都應(yīng)該可以通過可視化方式配置出來，從而達(dá)到組件復(fù)用、靈活配置、方便維護(hù)等效果。在使用過程中，業(yè)務(wù)的復(fù)雜遠(yuǎn)不是基礎(chǔ)組件能覆蓋的，于是要求需要具備很強(qiáng)的擴(kuò)展性，以便定制業(yè)務(wù)組件，有些項(xiàng)目甚至還使用了不同前端框架。
epage的設(shè)計(jì)器及渲染器分別基于原生dom節(jié)點(diǎn)設(shè)計(jì)，使得設(shè)計(jì)器及渲染器分離，結(jié)合統(tǒng)一的schema規(guī)范，實(shí)現(xiàn)一次設(shè)計(jì)多處渲染。關(guān)于如何定制開發(fā)widget可以訪問 如何開發(fā)widget?