Comments (3)
代码发布思路:
- 根据设计器配置的组件,获取配置组件对应的配置文件,调用服务器接口,接口参数格式如下:
{
page: {
id: 'page_0cc3894c77ed7671', // 页面id
style: {}, // 页面样式数据
plugins: [{
key: 'xaInput', // 组件名
props: {}, // 组件数据配置
}], // 设计器配置的组件信息
},
terminal: 'mac' // window 设备标示
}
-
服务器解析参数动态生成组件代码,解析过程大致如下:
-
下载项目基础模版(https://github.com/xiaoai7904/vue_cli_3.x/archive/master.zip) 并且解压文件到系统
runtime
文件夹下 -
根据参数
plugins
中使用的组件(key),复制运行器中src/plugins
对应组件包到运行器目录下 -
根据参数生成页面代码,根据
page -> style
数据构建页面布局 -
遍历
page -> plugins
组件数组生成如下代码(通过读写文件实现,使用了nodejs
中的fs
模块),具体生成过程代码请参考运行器代码生成源码<template> <div class="page_0cc3894c77ed7671"> <div class="xaInput_db58e409d2648210" style="position:absolute;width:200px;height:50px;left:153px;top:149px;auto-view:[object Object];padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;border-width:0px;border-style:solid;border-color:#EBEEF5;background-color:#fff;" > <xaInput :options="componentsOptions.xaInput_db58e409d2648210" :custom="componentsOptions.xaInput_db58e409d2648210.custom" :children="componentsOptions.xaInput_db58e409d2648210.children" /> </div> </div> </template> <script> /** 组件逻辑代码 */ export default { name: 'page0cc3894c77ed7671', data() { return { componentsOptions: { xaInput_db58e409d2648210: { "type": "text", "value": "", "size": "mini", "placeholder": "输入框", "clearable": false, "disabled": false, "readonly": false, "maxlength": 200, "prefix": "", "suffix": "", "search": false, "enterButton": false, "rows": 2, "autosize": false, "number": false, "autofocus": false, "autocomplete": "off", "fontSize": 14, "fontColor": "#606266", "eventListeners": {}, "children": [], "custom": { "width": 200, "height": 50, "x": 153, "y": 149, "autoView": { "x": 0, "y": 0, "w": 24, "h": 2 }, "name": "输入框", "iconname": "iconinput", "id": "xaInput_db58e409d2648210" } } } } } } </script> <style> /** 组件样式 */ body { margin: 0; padding: 0; } .page_4edd98ab2c764993 { position: relative; width: 1366px; height: 768px; background: #fbfbfb; margin: 0 auto; } </style>
-
mac系统执行项目根目录
run.sh
脚本#!/bin/sh cd /Users/xiaoai/work/ui_designer/runtime/vue_cli_3.x-master #npm install npm install #npm run serve npm run serve
-
window系统执行项目根目录
run.bat
脚本::start ::end npm install npm run serve
-
上面步骤执行完成会在项目runtime
目录下面生成一个基于vue cli3.x
的项目,可以修改runtime/vue_cli_3.x-master/src/components
下面对应组件代码进行二次开发
from web_designer.
感谢大佬回答,不过运行器代码生成源码链接失效了~
from web_designer.
服务停了 还没去弄😂
from web_designer.
Related Issues (20)
- 模板发布后怎么绑定数据 HOT 1
- 您好,可以问下咱们这个可一次多选几个图形么? HOT 3
- 您好,选中拖拽到画布上的其中的某几个控件,点击右键可以保存成一个新的综合组件,下次我可以直接拖拽这个新生成的自定义的组合控件,直接生成想要的,不用一步一步的去重新拽组合了,配置属性的话可以对这个整体进行配置,这个是一个扩展功能。最近有这方面的需求,不知道您有什么比较好的思路提供么? HOT 2
- 代码发布,点了没报错,也没 HOT 1
- 在线预览的网址进不去 HOT 1
- 请问怎么样才可以联系到你 HOT 1
- 本地部署,发布成功后,按照命令进行安装npm install,然后进行运行npm run serve就报如下错误,大神可有高招? HOT 1
- 这个发布是什么功能 HOT 3
- 组件 HOT 1
- 代码生成 HOT 1
- 大佬 HOT 1
- 布局问题 HOT 4
- 关于echarts组件问题
- 404 Not Found HOT 2
- 这个icon是哪里实现的,我想加一些icon HOT 1
- 提一个建议 HOT 1
- issues
- 请问是否还会更新呢
- 项目还会更新吗? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web_designer.