xiaoai7904 / Web_designer
Licence: mit
网页设计器图形化工具,通过拖拽组件进行页面排版和生成页面代码
Stars: ✭ 219
Programming Languages
javascript
184084 projects - #8 most used programming language
js
455 projects
Projects that are alternatives of or similar to Web designer
Vue Admin
基于Vue2、element ui、vue-cli、vuex、vue-router、axios 、echarts后台管理系统demo. 权限管理,用户管理,菜单管理。无限级菜单,下拉树形选择框
Stars: ✭ 1,135 (+418.26%)
Mutual labels: vue-cli, vue-router, element-ui
Vue Objccn
🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用
Stars: ✭ 1,993 (+810.05%)
Mutual labels: vue-cli, vue-components, vue-router
Vue element shopmanage
基于vue+element的商品后台管理
Stars: ✭ 75 (-65.75%)
Mutual labels: vue-cli, vue-router, element-ui
Vue Admin Design
基于vue + elementUI的管理系统模板
Stars: ✭ 279 (+27.4%)
Mutual labels: vue-cli, vue-router, element-ui
Vue3 News
🔥 Find the latest breaking Vue3、Vue CLI 3+ & Vite News. (2021)
Stars: ✭ 2,416 (+1003.2%)
Mutual labels: vue-cli, vue-components, vue-router
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (+37.44%)
Mutual labels: vue-components, vue-router, element-ui
Fantastic Admin
一款开箱即用的 Vue 中后台管理系统框架,基于ElementUI,兼容PC、移动端,vue-admin, vue-element-admin, vue后台
Stars: ✭ 153 (-30.14%)
Mutual labels: vue-cli, vue-router, element-ui
special-vue-series-code-analyzing
「Vue生态库源码系列」,Vue、Vue-router、Vuex、Vue-cli、Vue-loader、Vue-devtools等
Stars: ✭ 15 (-93.15%)
Mutual labels: vue-cli, vue-components, vue-router
Vue2 Manage
基于 vue + element-ui 的后台管理系统
Stars: ✭ 11,345 (+5080.37%)
Mutual labels: vue-cli, vue-router, element-ui
vue2
【🔥Vue.js资讯📚】目前web前端开发非常火爆的框架;定时更新,欢迎 Star 一下。
Stars: ✭ 415 (+89.5%)
Mutual labels: vue-cli, vue-components, vue-router
Vue Blog
🎉 基于vue全家桶 + element-ui 构建的一个后台管理集成解决方案
Stars: ✭ 208 (-5.02%)
Mutual labels: vue-cli, vue-router, element-ui
aura-admin
Aura Admin is the Web App that helps you to mange the Tech Communities like GDGs, DSCs or any other tech communities with Aura
Stars: ✭ 58 (-73.52%)
Mutual labels: vue-cli, vue-components, vue-router
Vue2
【🔥Vue.js资讯📚】目前web前端开发非常火爆的框架;定时更新,欢迎 Star 一下。
Stars: ✭ 395 (+80.37%)
Mutual labels: vue-cli, vue-components, vue-router
vue-element-admin
Vuejs实例-Vuejs2.0全家桶结合ELementUI制作后台管理系统http://www.cnblogs.com/weiqinl/p/6873761.html
Stars: ✭ 97 (-55.71%)
Mutual labels: vue-cli, vue-router, element-ui
Vue Meizi
vue最新实战项目,vue2 + vuex + webpack + es6 干货多多,新手福利
Stars: ✭ 1,476 (+573.97%)
Mutual labels: vue-cli, vue-router, element-ui
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (+1.83%)
Mutual labels: vue-cli, vue-components, vue-router
vue2.0-SellPosSystem
vue2.0实战项目——简单的快餐店系统
Stars: ✭ 35 (-84.02%)
Mutual labels: vue-cli, vue-router, element-ui
Vue Todos
vue最新实战项目教程,从零开始,一步一个脚印,循序渐进。跟着我一起学习vue吧!
Stars: ✭ 1,659 (+657.53%)
Mutual labels: vue-cli, vue-router, element-ui
Vue Shoppingcart
ShoppingCart (Ecommerce) 🛒 Application using Vuejs, + Node.js + Express + MongoDB 🚀🤘
Stars: ✭ 141 (-35.62%)
Mutual labels: vue-cli, vue-components, vue-router
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 运行态支持事件配置功能
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].