1 Star 0 Fork 1

dgiot开源社区 / web_designer

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

Web Designer

在线预览

项目部分截图

  • 页面设计区
  • 页面预览
  • 图表样式设置可视化配置
  • 图表样式设置代码编辑
  • 组件事件配置
  • 组件联动事件配置

简介:

  • 项目使用了Vue进行开发
  • 网页设计器图形化工具,目前内置ElementUi组件库
  • 一键生成网页代码,支持进行二次开发
  • 通过拖拽左侧组件图标,放置中间画布区,进行页面排版,设计区右侧面板可以对组件属性进行设置
  • 点击右侧顶部保存按钮(数据保存在本地浏览器localStorage)可以进行数据保存
  • 点击右侧顶部预览按钮,可以对页面布局进行预览
  • 点击右侧顶部发布按钮,会调用设计器后台服务进行页面生成和代码生成,生成完成之后会在项目根目录生成runtime/vue_cli_3.x-master文件夹,里面的代码可以进行二次开发(基于 vue cli 3.x 版本)
  • 默认发布完成之后,会打开命令行工具进行项目初始化(npm install)和打开项目(npm run serve)

项目运行

// 启用设计器
npm install
// 启用设计器后台服务(至少node 8.x),用于发布模版和生成模版代码
cd server/
npm install
npm run dev

项目目录结构


├── README.md                           <=  项目介绍
├── src                                 <=  项目主目录
│   ├── assets                          <=  静态资源
│   ├── components                      <=  公共组件
│   │   ├── codeEditor                  <=  代码编辑组件
│   │   ├── componentsList              <=  左侧组件列表组件
│   │   ├── designerContent             <=  中间设计区
│   │   ├── draggableResizable          <=  组件拖拽组件
│   │   ├── itemList                    <=  组件属性配置组件(参考下拉菜单,单选框,复现框属性配置)
│   │   ├── pageAutoView                <=  页面自适应组件
│   │   ├── pageCanvas                  <=  中间设计区
│   │   ├── pageDialogView              <=  系统弹窗代理组件
│   │   ├── pageFormView                <=  系统表单组合组件
│   │   ├── pageIconsView               <=  系统icon图标组件
│   │   ├── pageSwitch                  <=  系统开关组件
│   │   ├── styleSetting                <=  图表样式设置组件
│   │   ├── index.js                    <=  公共组件入口文件
│   ├── directive                       <=  系统内置指令
│   │   ├── dragDialog                  <=  拖拽弹窗
│   │   ├── index.js                    <=  指令入口文件
│   ├── modules                         <=  系统模块
│   │   ├── configuration               <=  组件配置
│   │   ├── echartBase                  <=  图表基类
│   │   ├── http                        <=  请求模块
│   │   ├── observer                    <=  事件监听模块
│   │   ├── page                        <=  页面基类
│   │   ├── pageEventManage             <=  页面事件处理模块
│   │   ├── plugins                     <=  组件基类
│   │   ├── systemLoader                <=  系统加载器
│   │   ├── utils                       <=  工具类
│   │   ├── vuePropertyDecorator        <=  vue属性装饰器
│   ├── plguins                         <=  系统内置组件
│   ├── rumtimeComponents               <=  运行态组件
│   ├── styles                          <=  系统样式
│   ├── views                           <=  页面
│   │   ├── designerPage                <=  设计器页面
│   │   ├── preview                     <=  预览页面
│   ├── App.vue                         <=  页面组件文件
│   ├── main.js                         <=  系统主入口文件
│   ├── router.js                       <=  路由配置文件
│   ├── store.js                        <=  数据管理
├── server                              <=  服务器主目录(详细参考 https://eggjs.org/zh-cn/)
├── publilc                             <=  项目静态文件目录
│   ├── index.html                      <=  项目主页面入口
│   ├── favicon.ico                     <=  浏览器页签logo
├── vue.config.js                       <=  vue打包,启动等配置(详细参数 https://cli.vuejs.org/zh/config/)
├── package.js                          <=  项目跟踪依赖关系和元数据配置文件

文档

后期版本规划

  • H5 页面生成器
  • 项目优化
  • ...

更新日志

  • 2019-03-25 项目初始化
  • 2019-04-20 新增拖拽组件进行排版,修改页面,组件属性
  • 2019-04-23 新增排版辅助线和预览功能
  • 2019-04-24 新增 inputNumber,radio 组件
  • 2019-05-15 新增 icon 图标选择器,画布区支持复制(Ctrl + c),粘贴(Ctrl + v)
  • 2019-11-20 新增按钮,链接,日期,时间,评分,警告,面包屑,日历,复选框,折叠,颜色选择器,进度条,下拉菜单,滑块,Tag
  • 2019-11-28 新增表格,树形控件,菜单组件和 json 编辑器(基于 monaco-editor)
  • 2019-12-14 新增一键生成页面和代码(基于Vue cli 3.x)
  • 2020-03-11 新增容器组件和图表组件,图表组件样式支持可视化配置
  • 2020-07-26 新增组件事件配置和联动事件配置
  • 2020-10-13 运行态支持事件配置功能
MIT License Copyright (c) 2019 xiaoai 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.

简介

暂无描述 展开 收起
JavaScript 等 6 种语言
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/dgiiot/web_designer.git
git@gitee.com:dgiiot/web_designer.git
dgiiot
web_designer
web_designer
master

搜索帮助