基于vue的可视化编程

基于vue的可视化编程
网上找了几个开源的,下载下来一一试了下
https://github.com/jaweii/Vue-Layout
https://github.com/L-Chris/vue-design
https://github.com/fireyy/vue-page-designer
https://github.com/OXOYO/X-Page-Editor-Vue

Vue-Layout用了muse-ui
https://muse-ui.org/#/zh-CN/card
感觉还不错。

安装VSCode:https://code.visualstudio.com/,直接下载安装就可以,30几M还是比较小的。
Vue-Layout 流程学习:
编译流程:
参考文档:https://www.cnblogs.com/hl0203/p/7138600.html

npm run dev : node build/dev-server.js
-》package.json “dev”: “node build/dev-server.js”,
dev-server.js->
webpackConfig === webpack.dev.conf:这个
webpack.dev.conf.js-> webpack.base.conf
webpack.base.conf.js:这个文件entry app main.js 还定义了不同文件的loader等
这样基本上都load进工程里面了。

程序流程:
主要的三个文件:Index.html main.js引用muse-ui等并定义new Vue app.vue实现关在app
main.vue 中定义app挂载点:并定义主界面
最左边的已使用的插件离别
component-tree

中间preview

最右侧控件列表:

-》components.vue
mu-select-field Muse-ui;Mint-ui;iView-ui

我们来看mu-select-field 这个muse-ui组件:https://muse-ui.org/#/zh-CN/selectmoxing
组件用的版本是2:https://muse-ui.org/2.1.0/#/selectField

TextField.vue:文件就是定义了组件的template和export数据模型

当拖拽这个组件list的时候,相应components.vue 中dragStart函数,
e.dataTransfer.setData(‘info’, JSON.stringify(info))
参数放在了json串info中
之后在preview.vue文件中的drop函数中进行处理
preview.vue:
drop(e) { //松开拖放,e是容器元素,在这个函数处理
从e元素中得到参数,整理component,之后分成嵌套和非嵌套两种。
非嵌套的就直接:调用如下函数:
components.splice(index, 0, component)
this.fresh()-》函数执行this.mount()函数
mount()函数:进入mount.js
mount.js:
函数得到参数,并注册一个Vue

  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柔贝特三哥

你的鼓励是我坚持创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值