Magic-page-designer NPM

magic-page-designer

介绍

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

特性

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

安装教程

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

使用说明

注册组件

import { createApp } from 'vue'
import App from './App.vue'
import MagicPageDesigner from 'magic-page-designer'
// 最后引入自定义css，为了覆盖其它样式
import 'magic-page-designer/dist/index.css'

const app = createApp(App)

app.use(MagicPageDesigner)
app.mount('#app')

使用组件

<template>
  <magic-page-designer
    v-model:mpdPageConfig="mpdPageConfig"
    v-model:mpdPageValue="mpdPageValue"
    v-model:selectPageNodeDom="selectPageNodeDom"
    :editorMode="editorMode"
  ></magic-page-designer>
</template>

<script setup>
import { ref, reactive } from 'vue'
// 需要渲染的页面json数据，必填
const mpdPageConfig = reactive({})
// 当前页面所存储的值
const mpdPageValue = reactive({})
// 编辑模式下选中的dom，非必填
const selectPageNodeDom = reactive({})
// 是否编辑模式，默认false
const editorMode = ref(true)
</script>

注册组件库，以便拖拽组件使用

import { addLibrary } from 'magic-page-designer'
addLibrary({
  id: 'text',
  title: '文本',
  list: [
    {
      id: 'span',
      title: 'span',
      mpdConfig: {
        text: '在此处修改span标签内容'
      },
      ext: {
        icon: 'mpd-icon-text-border'
      }
    }
  ]
})