落地页管理系统是提供给运营与设计人员使用的营销活动管理平台，通过拖拽UI组件生成可维护的落地页面在小程序及H5端实时展现。
- 在线体验管理系统
- 我的一篇开发实践分享 可视化页面编辑管理系统开发实践分享
- 后端技术栈 node+Koa+mongodb，提供落地页的更删改查API服务、素材的上传更新及有效期定时检测等。
- 前端技术栈 Vue+Vuex+Vue-route+EmenetUI+Axios，开发实现组成页面所需的基础组件及业务营销组件。
src
|-- App.vue
|-- main.js // 项目入口
|-- components // 公共组件目录
| |-- BreadCrumb // 面包屑导航组件
| | |-- breadcrumb.scss
| | |-- index.vue
| |-- Carousel // 轮播图组件
| | |-- carousel.scss
| | |-- index.vue
| |-- CarouselSet // 轮播图属性编辑组件
| | |-- index.vue
| |-- ContextMenu // 右键菜单组件
| | |-- contextmenu.scss
| | |-- index.vue
| |-- Event // 事件组件
| | |-- event.scss
| | |-- index.vue
| |-- EventSet // 事件属性编辑组件
| | |-- index.vue
| |-- Goods // 商品组件
| | |-- goods.scss
| | |-- index.vue
| |-- GoodsSet // 商品属性编辑组件
| | |-- index.vue
| |-- HeadInfo // 头部显示组件
| | |-- headinfo.scss
| | |-- index.vue
| |-- Picture // 图片组件
| | |-- index.vue
| | |-- picture.scss
| |-- PictureSet // 图片属性编辑组件
| | |-- index.vue
| |-- Video // 视频组件
| | |-- index.vue
| | |-- video.scss
| |-- VideoSet // 视频属性编辑组件
| |-- index.vue
|-- pages // 页面目录
| |-- LandPage // 落地页渲染页面
| | |-- index.vue
| | |-- landpage.scss
| |-- Login // 登陆页面
| | |-- index.vue
| | |-- login.scss
| |-- PageCreate // 落地页创建页面
| | |-- index.vue
| | |-- pagecreate.scss
| | |-- components // 创建页面分成左侧组件列表、中间窗口渲染组件、右侧属性编辑组件
| | |-- pageCenter // 中间窗口渲染组件
| | | |-- index.vue
| | | |-- pagecenter.scss
| | |-- pageRight // 右侧属性编辑组件
| | |-- index.vue
| | |-- pageright.scss
| |-- PageEditor // 落地页编辑页面，共享创建页面，根据路由判断实现不同业务需求
| | |-- index.vue
| | |-- pageeditor.scss
| |-- PageList // 落地页列表页面（新建、编辑、删除、状态管理等）
| | |-- index.vue
| | |-- pagelist.scss
| |-- PagePreview // 落地页预览页面
| |-- index.vue
| |-- pagepreview.scss
|-- assets // 资源目录（样式文件）
| |-- style
| |-- animate.css
| |-- common.scss
| |-- normalize.css
| |-- var.scss
|-- http // http请求的接口与方法
| |-- index.js
| |-- request.js
|-- router // 页面路由目录
| |-- index.js
| |-- permission.js
|-- store // vuex状态管理目录
| |-- actions.js
| |-- index.js
| |-- mutations.js
| |-- state.js
|-- utility // 常用工具类函数与静态配置文件目录
|-- const.js
|-- filter.js
|-- index.js
|-- landpage.js
- 页面的可维护（新建、编辑、删除、状态管理等）。
- 页面的常见功能或属性编辑（标题，背景、有效期、微信自定义分享、返回顶部功能等）。
- 组成页面的元素组件化，可自由拖拽组装，编辑修改组件属性。
- 页面结构数据化，客户端根据数据动态渲染落地页面。
- 逐步实现事件组件、商品组件等。
- 小程序端的渲染实现（数据结构相同，需使用小程序语法实现），目前只实现H5端。
//下载
git clone https://github.com/YuniorZen/landpage.git
//安装依赖
cd landpage
npm install
//启动本地服务 localhost:8080
npm run dev
//构建打包
npm run build
1.
代码规范使用eslint官方推荐，编码时注意开发控制台的提示，参照规范协作开发。
具体编码规则见官方标绿箭头 http://eslint.cn/docs/rules/
2.
组件基于750设计宽度，1rem=100px
3.
zindex层级 -1，0，10，100，1000，...