{"_id":"magic-page-designer","_rev":"56-2f660ef2e63e932de7c4ea441f2c4aaa","time":{"0.0.1-bate1":"2021-08-05T07:30:08.189Z","created":"2021-08-07T16:06:55.982Z","0.0.1-bate3":"2021-08-07T16:06:56.201Z","modified":"2022-05-08T16:40:07.834Z","0.0.1-bate4":"2021-08-07T16:38:00.197Z","0.0.1-bate.4":"2021-08-07T16:41:22.880Z","2.0.0-bate.4":"2021-08-07T16:47:36.837Z","0.0.1":"2021-08-14T16:13:21.245Z","2.0.0":"2021-08-14T16:14:37.900Z","0.0.2":"2021-08-16T15:05:59.882Z","2.0.0-beta1":"2021-08-17T09:17:26.124Z","2.0.0-beta2":"2021-08-17T11:16:55.221Z","2.0.1":"2021-08-17T12:00:52.393Z","0.0.3":"2021-08-24T14:39:48.393Z","0.0.4":"2021-08-24T15:23:09.302Z","0.0.5":"2021-08-24T15:48:55.545Z","0.0.6":"2021-08-24T16:15:49.753Z","0.1.0":"2021-09-02T14:46:23.942Z","0.1.1":"2021-09-03T13:58:51.341Z","2.0.2":"2021-09-03T14:18:03.756Z","0.1.2":"2021-09-07T14:28:52.314Z","2.0.3":"2021-09-07T14:29:18.605Z","2.0.4":"2021-09-08T02:57:09.424Z","0.1.3":"2021-09-08T02:57:28.612Z","0.1.4":"2021-09-08T03:06:53.553Z","2.0.5":"2021-09-08T03:08:41.471Z","2.0.6":"2021-09-08T03:21:13.720Z","0.1.6":"2021-09-08T03:22:29.764Z","2.0.7":"2021-09-08T05:48:56.288Z","0.1.7":"2021-09-08T05:49:17.249Z"},"name":"magic-page-designer","dist-tags":{"latest":"0.1.7","next":"2.0.7"},"versions":{"2.0.7":{"name":"magic-page-designer","version":"2.0.7","private":false,"scripts":{"dev":"vite","build":"vue-tsc --noEmit && vite build","serve":"vite preview","publish:latest":"npm publish --tag latest","publish:beta":"npm publish --tag beta","publish:next":"npm publish --tag next","unpublish":"npm unpublish magic-page-designer@2.0.6","unpublish:force":"npm unpublish --force magic-page-designer@0.0.1"},"dependencies":{"ant-design-vue":"^2.2.2","clipboard-copy":"^4.0.1","lodash":"^4.17.21","vue":"^3.2.1"},"devDependencies":{"@vitejs/plugin-vue":"^1.3.0","@vue/compiler-sfc":"^3.2.2","less":"^4.1.1","less-loader":"^10.0.1","typescript":"^4.3.5","vite":"^2.4.4","vite-plugin-style-import":"^1.0.1","vue-tsc":"^0.2.3"},"main":"./dist/magic-page-designer.umd.js","module":"./dist/magic-page-designer.es.js","typings":"./src/types/index.d.ts","repository":{"type":"git","url":"https://gitee.com/ssssssss-team/magic-page-designer.git"},"license":"MIT","bugs":{"url":"https://gitee.com/ssssssss-team/magic-page-designer/issues"},"author":{"name":"billdowney"},"homepage":"https://ssssssss.org","keywords":["vue","magic-page-designer","dynamic-pages","ssssssss-team"],"readme":"# magic-page-designer\r\n\r\n#### 介绍\r\n\r\nmagic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code with me。\r\n\r\n#### 特性\r\n\r\n- 使用`vue3`，并且轻度依赖`ant-design-vue`(按需加载)，主要用于一些自用的配置组件，并不是强依赖，所以不用在意自己的框架是否引入`ant`\r\n- 无需重复开发`vue`文件，只需要将注册到项目的`component`配置到左侧工具栏，就可以在线拖拽生成页面了\r\n- 提供在线拖拽编辑页面，可即时修改页面不足之处，再也不用 `dev、build` 啦~\r\n- 只需要添加到自己的项目中，再写一个自定义组件的`json`配置，就可以在页面上配置\r\n- 没有任何限制，完全基于`component`自定义组件原理，支持属性、样式、事件配置，只要 vue 文件能写得出，那就能在平台上使用，而且写法完全一样\r\n- 属性、双向绑定、事件等表达式写法，完全基于`js`和`vue`写法实现，无需额外的学习成本\r\n\r\n#### 安装教程\r\n\r\n- `npm`命令(vue2)：`npm i magic-page-designer`\r\n- `npm`命令(vue3)：`npm i magic-page-designer@next`\r\n- `yarn`命令(vue2)：`yarn add magic-page-designer`\r\n- `yarn`命令(vue3)：`yarn add magic-page-designer@next`\r\n\r\n#### 使用说明\r\n\r\n1.  注册组件\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport MagicPageDesigner from 'magic-page-designer'\r\n// 最后引入自定义css，为了覆盖其它样式\r\nimport 'magic-page-designer/dist/index.css'\r\n\r\nconst app = createApp(App)\r\n\r\napp.use(MagicPageDesigner)\r\napp.mount('#app')\r\n```\r\n\r\n2.  使用组件\r\n\r\n```vue\r\n<template>\r\n  <magic-page-designer\r\n    v-model:mpdPageConfig=\"mpdPageConfig\"\r\n    v-model:mpdPageValue=\"mpdPageValue\"\r\n    v-model:selectPageNodeDom=\"selectPageNodeDom\"\r\n    :editorMode=\"editorMode\"\r\n  ></magic-page-designer>\r\n</template>\r\n\r\n<script setup>\r\nimport { ref, reactive } from 'vue'\r\n// 需要渲染的页面json数据，必填\r\nconst mpdPageConfig = reactive({})\r\n// 当前页面所存储的值\r\nconst mpdPageValue = reactive({})\r\n// 编辑模式下选中的dom，非必填\r\nconst selectPageNodeDom = reactive({})\r\n// 是否编辑模式，默认false\r\nconst editorMode = ref(true)\r\n</script>\r\n```\r\n\r\n3.  注册组件库，以便拖拽组件使用\r\n\r\n```js\r\nimport { addLibrary } from 'magic-page-designer'\r\naddLibrary({\r\n  id: 'text',\r\n  title: '文本',\r\n  list: [\r\n    {\r\n      id: 'span',\r\n      title: 'span',\r\n      mpdConfig: {\r\n        text: '在此处修改span标签内容'\r\n      },\r\n      ext: {\r\n        icon: 'mpd-icon-text-border'\r\n      }\r\n    }\r\n  ]\r\n})\r\n```\r\n\r\n4. 更多详细说明请查看文档[magic-page-designer-doc](https://ssssssss-team.gitee.io/magic-page-designer-doc/)\r\n","readmeFilename":"README.md","gitHead":"cd76233a2e7fab1d6b4a9e3111a0205c5ded6efe","description":"magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w","_id":"magic-page-designer@2.0.7","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-9J3YcjKKqryy7U3Fzta6eqo6tFvQxfVWEeC27HEhdEUvfjslmgop1Cx8eyQOsFY6n8SEvkMxWqhYhGSC4PnUdg==","shasum":"70a5cbe21457736c878580cb771739e88d47652c","tarball":"https://registry.npmjs.org/magic-page-designer/-/magic-page-designer-2.0.7.tgz","fileCount":88,"unpackedSize":2383522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOE7ICRA9TVsSAnZWagAAwsgP/jqoxOmOMCKRMwFNH0+E\n2Mc1KLPrhQGvwgButCI4yFxcjbWr9fxq0RqwHowX5AQhU7BmSLvjJ7Kj1sPZ\ncy7gn3dayJU/0iq1m2USPjNIUDDbkgUfBTQYbKNHukNQm+msVEobdHq2QmEJ\n/4EhF9x2fZ1PaHXHR8RY/NmShl7X23gFf1QcSIChGPcdPxRxZZLEAvzMa/UE\n9ceuVzIgilAXiJFkMOVv9+kml1rrtMCsbVLjJx4SJsO1VLbNXNKKqOX7naqF\n4sBg58uxkysDPfvcYSf1iW2VQwkGVgjTIh+Cvb4ls8xhKI1JoOgE/+WSpZDJ\n9LckaNAx6z/LMiFWtsexnP9KGUOBKIPBMvjqO+pvxyUnWmnNbcTIU6Ih728y\ntDDwJ/zPdEWloKsIAhNbuLfhY+HePB4iaU1cdhuFlb5/Vs8qe2MibA9zfO4H\n7QbNDnlm9B1kMZxbXd0Tp2eEOfqKCB/h4gSAOnEBLQFqq+tcXpU03lgCEcn8\nc1t345BGh3D9d21tcDtxX5zj40XpVxBtapA0ZsT/vqoZrTIS06rztAf6vZr7\n+38CSjFwrbguuYZRTEuyw7tfAeUbEdyEMQVfKKEbYzm02KmY0eT+c9M8lpOv\n1Oh15/qeO/Vv2U/MHbNDJNGXMSov1rI92AfPNACtkL0D6CXPI3Aun7+F0+b4\nyCqX\r\n=9/LQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqWKiqgvb5pFF/FoKyQtKRVyOqFNf+GJ4eOt7RpUI05AiEA5FkFYLsr6A2WCQy2ZomQPoj5i7Xi7uhwHGfZoBJwni4="}]},"_npmUser":{"name":"billdowney","email":"billdowney@163.com"},"directories":{},"maintainers":[{"name":"billdowney","email":"billdowney@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/magic-page-designer_2.0.7_1631080136033_0.9427658102458225"},"_hasShrinkwrap":false},"0.1.7":{"name":"magic-page-designer","version":"0.1.7","private":false,"scripts":{"dev":"vue-cli-service serve","build":"vue-cli-service build","build:lib":"vue-cli-service build --name magic-page-designer --target lib --entry ./src/index.ts","publish:latest":"npm publish --tag latest","publish:beta":"npm publish --tag beta","publish:next":"npm publish --tag next","unpublish":"npm unpublish magic-page-designer@0.1.6","unpublish:force":"npm unpublish --force magic-page-designer@0.0.1"},"dependencies":{"ant-design-vue":"^1.7.6","clipboard-copy":"^4.0.1","core-js":"^3.6.5","lodash":"^4.17.21","vue":"^2.6.11","vue-class-component":"^7.2.3","vue-property-decorator":"^9.1.2"},"devDependencies":{"@vue/cli-plugin-babel":"~4.5.0","@vue/cli-plugin-typescript":"^4.5.13","@vue/cli-service":"~4.5.0","babel-plugin-import":"^1.13.3","less":"^3.0.4","less-loader":"^5.0.0","typescript":"~4.1.5","vue-template-compiler":"^2.6.11"},"browserslist":["> 1%","last 2 versions","not dead"],"main":"./dist/magic-page-designer.umd.js","module":"./dist/magic-page-designer.es.js","typings":"./src/types/index.d.ts","exports":{".":{"import":"./dist/magic-page-designer.es.js","require":"./dist/magic-page-designer.umd.js"}},"repository":{"type":"git","url":"https://gitee.com/ssssssss-team/magic-page-designer.git"},"license":"MIT","bugs":{"url":"https://gitee.com/ssssssss-team/magic-page-designer/issues"},"author":{"name":"billdowney"},"homepage":"https://ssssssss.org","keywords":["vue","magic-page-designer","dynamic-pages","ssssssss-team"],"gitHead":"52796d5bcf1be46de3a7cd58c03892d3640f4887","description":"magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w","_id":"magic-page-designer@0.1.7","_nodeVersion":"14.17.3","_npmVersion":"6.14.13","dist":{"integrity":"sha512-X+K0NvDr+W2LFBwZmwxI5wMRojNZ2TaQPd7mlGgDmCkFKpl+piCOXWb1MRzHIqfO7s5rzZFdVQDHIiqlrL6ATw==","shasum":"1152d18dd4c950f6f182741dc5dcf16fbb8d7ea0","tarball":"https://registry.npmjs.org/magic-page-designer/-/magic-page-designer-0.1.7.tgz","fileCount":104,"unpackedSize":14820413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOE7dCRA9TVsSAnZWagAA9JYQAKQgYrNgcsmyaRzjC1lQ\nHF+O/FovgziIQgR0spULWNFGxYxMliU4Pf3J1E8tacB3qEhaJ3QdeObEXVgr\na1xE9Q3nTsdfF4E3L7dvMYbRc+TS/NrVujnrgFLKbehQymWiR/rvPMrYRHVA\nmeZDd6xHQZoZX+JoMkc3AOjmdUEnj485E/+DZ5GM558GUJHXZgeXiVgdfqye\nnoZFU8VOrqYgKNrywtcGRG2jZ3HM43FqZjS50L6dc08Easnv2yIsWHmkGPlJ\nf8YuTt8cZn5b3+2h3RjBJm6oavPgVfXhzjZfeID18O+OmpzTrbFxKAPdvbiE\nxWSmif/db+ZdQgme7ajfnvugIcgMx+pupS6sxt+ZJGjJbPwL5OCBXFNjlN2U\nyNdy2pVxRyRLAb0knh1KatKzLCUkyCagv/Ny9b3ErgBZLgbTZDV36D1HDQeh\nplTztBzGD/DaLEOTZ3gx/zRvGzI/5/GP5ymjtAJ+8TaAwm+wPImm8V8dxZUM\ncrYpy3ay/0KU+o3fmWli3rYS7KUYXyu8rBCvTD1zndYZou968eTbgIEDPtgB\nDS+8NkAyyDpBKFJlqG+T3xOPT/4O9QinCU3MkAfd/qXB85X0qKS0fd+PaL3A\nUngVRfV2JCGAwjsGn91HL81HN/E/oL5ePzewmeVrfO/IINJpr3DoXcNv3ves\ngRM2\r\n=Ue9b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbH+JsVOXPnNpEBzlTvit3Vn1S6GpRvWr1rV+veLiKgAiEAvJZXRoZBOmmh5/2NrXqiAxRNMpJeYOuI+GOjYo+OnuU="}]},"_npmUser":{"name":"billdowney","email":"billdowney@163.com"},"directories":{},"maintainers":[{"name":"billdowney","email":"billdowney@163.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/magic-page-designer_0.1.7_1631080156978_0.5773582355193612"},"_hasShrinkwrap":false}},"maintainers":[{"name":"billdowney","email":"billdowney@163.com"}],"description":"magic-page-designer 是一个基于 vue 的在线页面快速开发平台，主要把所有的 vue 代码都改为在线配置，最终获得一个 json 格式的页面，你可以把它存放到服务器的任何地方：数据库、静态文件、redis 等。最方便的是可以在线修改页面，再也不用担心生产出问题了，还得打开 IDE，修改测试打包，直接在线编码，所见即所得。还可以配合 [magic-api](https://gitee.com/ssssssss-team/magic-api) 使用，完全抛弃 IDE，随时随地 code w","homepage":"https://ssssssss.org","keywords":["vue","magic-page-designer","dynamic-pages","ssssssss-team"],"repository":{"type":"git","url":"https://gitee.com/ssssssss-team/magic-page-designer.git"},"author":{"name":"billdowney"},"bugs":{"url":"https://gitee.com/ssssssss-team/magic-page-designer/issues"},"license":"MIT","readme":"","readmeFilename":""}