20 Star 172 Fork 87

ssssssss-team / magic-page-designer

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

magic-page-designer

介绍

magic-page-designer是一个基于 vue 的在线页面快速开发平台,主要把所有的vue代码都改为在线配置,最终获得一个json格式的页面,你可以把它存放到服务器的任何地方:数据库、静态文件、redis 等。最方便的是可以在线修改页面,再也不用担心生产出问题了,还得打开IDE,修改测试打包,直接在线编码,所见即所得。还可以配合 magic-api 使用,完全抛弃IDE,随时随地code with me

本框架的主要功能要区别于百度的amisamis主要是可以在web上编辑一些页面上的元素,但是这些元素只能是amis框架中自己的已有的内容,所以当开发者想自己加一个甲方奇奇怪怪的需求的时候就可能会遇到难点。所以本框架有着万物皆可创造的思想:

  • 譬如你的系统用的是ant框架,没问题,只需要在开发阶段,把ant的组件一个一个配置到框架中,那么mpd就拥有了在页面上拖拽配置ant的功能。
  • 又或者你的系统用的是element框架,还是没问题,依旧把element配置到框架中,那么mpd就拥有了在页面上拖拽配置element的功能。
  • 假如你的系统是一个闭源框架,完全是由内部自用,也没问题,把你自己写的所有组件配置到框架中,那么mpd就拥有了在页面上拖拽配置内部框架的功能。
  • 所以mpd所提供的功能就是让你自己的vue组件,自由的在web上拖拽,并且实现对应的功能
  • 而本框架的自由度极高,例如你的组件有一个属性值size,它的值可以取固定值small、middle,你可以直接配置:input直接输入、select直接选择、任何的组件。只要这个组件能给这个属性赋值,那就都可以用,而且支持js的原生代码
  • 本框架还有更多的深层次的思想需要理解,所以不要仅仅只限于在web上拖拽组件这么简单,期待大家来发现

特性

  • 使用vue2,并且轻度依赖ant-design-vue(按需加载),主要用于一些自用的配置组件,并不是强依赖,所以不用在意自己的框架是否引入ant
  • 无需重复开发vue文件,只需要将注册到项目的component配置到左侧工具栏,就可以在线拖拽生成页面了
  • 提供在线拖拽编辑页面,可即时修改页面不足之处,再也不用 dev、build 啦~
  • 只需要添加到自己的项目中,再写一个自定义组件的json配置,就可以在页面上配置
  • 没有任何限制,完全基于component自定义组件原理,支持属性、样式、事件配置,只要 vue 文件能写得出,那就能在平台上使用,而且写法完全一样
  • 属性、双向绑定、事件等表达式写法,完全基于jsvue写法实现,无需额外的学习成本

演示

点击前往magic-page-designer-example

安装教程

  • npm命令(vue2):npm i magic-page-designer
  • npm命令(vue3):npm i magic-page-designer@next
  • yarn命令(vue2):yarn add magic-page-designer
  • yarn命令(vue3):yarn add magic-page-designer@next

使用说明

  1. 注册组件
import Vue from 'vue'
import App from './App.vue'
import MagicPageDesigner from 'magic-page-designer'
// 最后引入自定义css,为了覆盖其它样式
import 'magic-page-designer/dist/magic-page-designer.css'

Vue.config.productionTip = false

Vue.use(MagicPageDesigner)
new Vue({
  render: h => h(App)
}).$mount('#app')
  1. 使用组件
<template>
  <magic-page-designer
    :mpdPageConfig.sync="mpdPageConfig"
    :mpdPageValue.sync="mpdPageValue"
    :selectPageNodeDom.sync="selectPageNodeDom"
    :editorMode="editorMode"
    @mpdSave="mpdSave"
  ></magic-page-designer>
</template>

<script>
export default {
  data() {
    return {
      // 需要渲染的页面json数据,必填
      mpdPageConfig: {},
      // 当前页面所存储的值
      mpdPageValue: {},
      // 编辑模式下选中的dom,非必填
      selectPageNodeDom: {},
      // 是否编辑模式,默认false
      editorMode: true
    }
  },
  methods: {
    // 保存事件
    mpdSave(mpdPageConfigVal) {
      console.log('mpdSave', mpdPageConfigVal)
    }
  }
}
</script>
  1. 注册组件库,以便拖拽组件使用
import { addLibrary } from 'magic-page-designer'
addLibrary({
  id: 'text',
  title: '文本',
  list: [
    {
      id: 'span',
      title: 'span',
      mpdConfig: {
        text: '在此处修改span标签内容'
      },
      ext: {
        icon: 'mpd-icon-text-border'
      }
    }
  ]
})
  1. 更多详细说明请查看文档magic-page-designer
MIT License Copyright (c) 2021 超级小富翁 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

magic-page-designer 是一个基于 vue 的在线页面快速开发平台,主要把所有的 vue 代码都改为在线配置,最终获得一个 json 格式的页面,你可以把它存放到服务器的任何地方:数据库、静态文件、redis 等。最方便的是可以在线修改页面,再也不用担心生产出问题了,还得打开 IDE,修改测试打包,直接在线编码,所见即所得。还可以配合 magic-api 使用,完全抛弃 IDE,随 展开 收起
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
NodeJS
1
https://gitee.com/ssssssss-team/magic-page-designer.git
git@gitee.com:ssssssss-team/magic-page-designer.git
ssssssss-team
magic-page-designer
magic-page-designer
master

搜索帮助

14c37bed 8189591 565d56ea 8189591