itlaoguo / page-design

✏️一个基于vue实现的业务组件可视化页面编辑项目

Home Page:https://cullenng.github.io/page-design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

可视化页面装修

Vue Ant-deisgn Vue.Draggable

基于 vue + ant-design + vue-draggable 实现的可视化页面装修功能,基于业务需求和层出不穷的活动营销页面而诞生。
类似的还有:有赞、百度H5、京东等等, 后续会通过 page-design-ssr 服务来生成静态页面,这样就可以支持SSR需求拉

点我点我,查看演示DEMO

截图1.png

操作指引:

  1. 左侧组件区域拖拽至中间布局区域
  2. 中间区域的组件支持上下拖拽排序,删除组件
  3. 点击中间区域的组件,右侧会打开组件支持的配置项
  4. 右侧楼层管理支持组件的排序、复制、删除、定位等

目录

安装

$ npm install

启动

  1. 命令行执行:npm run dev
  2. 浏览器打开链接:localhost:3001

代码目录

├── README.md
├── package.json
├── src
│   ├── html
│   ├── interface // 接口
│   │   ├── core.js
│   │   ├── index.js
│   │   ├── json-data
│   │   │   ├── design_get_page_info.json
│   │   │   ├── get_component_list.json
│   │   │   ├── get_component_template_list.json
│   │   │   ├── get_goods_list.json
│   │   │   ├── material_folder.json
│   │   │   └── material_folder_details.json
│   │   └── material.js
│   ├── layout
│   ├── main.js
│   ├── resource // 图片
│   ├── router // 路由
│   ├── store
│   ├── system-components // 系统公共组件
│   │   ├── dialog
│   │   ├── dialog-goods-manager
│   │   ├── form-unit
│   │   ├── images-manager
│   │   ├── images-sort
│   │   └── ui-component-load
│   ├── ui-component // 业务组件
│   │   ├── U000001
│   │   ├── U000002
│   │   ├── U000003
│   │   ├── common-config.js
│   │   └── component-unit // 业务组件里面公共的元素
│   └── views // 系统页面
│       ├── home // 列表页
│       └── design // 装修页
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js

业务组件配置项自定义

查看文档

目前支持组件列表

标题栏

标题栏演示.gif

广告图

广告图演示.gif

商品列表

商品列表演示.gif

About

✏️一个基于vue实现的业务组件可视化页面编辑项目

https://cullenng.github.io/page-design

License:MIT License


Languages

Language:Vue 82.6%Language:JavaScript 17.0%Language:HTML 0.4%