Coder Social home page Coder Social logo

wishlong / page-design Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cullenng/page-design

0.0 0.0 0.0 7.17 MB

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

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

License: MIT License

JavaScript 16.98% HTML 0.38% Vue 82.63%

page-design's Introduction

可视化页面装修

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

page-design's People

Contributors

cullenng avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.