colinhongle/quark-h5

基于vue2 + koa2的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。类似易企秀、百度H5等H5制作、建站工具

夸克 H5

夸克H5是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。类似易企秀、百度 H5的H5制作、建站工具

技术栈

前端

vue2 + vue-router + vuex 服务端 Koa2 + mongodb

Demo

http://47.104.247.183:4000

功能演示

gif图比较大，加载比较慢

安装依赖

这里切记。使用 cnpm install 安装依赖。

cnpm install

修改mongodb配置

{
  "port": "4000",
  "adminAccount": "admin",
  "db": {
    "servername": "localhost",
    "DATABASE": "admin",
    "port": 27017,
    "user": "admin",
    "pass": "admin",
    "authSource": "admin"
  },
  "baseURL": "http://localhost:4000"
}

开发

npm run dev

构建

构建前端版本

npm run build-client

构建渲染模板

npm run lib:h5-swiper

技术实现和教程

待完善

Features

1. 编辑器

   • 拖拽改变组件形状
   • 元素: 复制（画布）
   • 元素: 删除（画布）
   • 元素: 编辑（画布）
   • 页面：新增
   • 页面：复制
   • 页面：删除
   • 快速预览
   • 撤销、重做

2. 基础组件

   • 文字
   • 普通按钮
   • 图形
   • 普通图片
   • 轮播图
   • iframe组件 ...

3. 表单组件

   • 单行文本
   • 多行文本
   • 单选
   • 多选
   • 下拉选框
   • 时间
   • 日期 ...

4. 功能组件

   • 单行文本音乐组件 ...

5. 编辑器功能

   • 页面编辑预览发布
   • 元素添加动画
   • 元素添加事件
   • 上传 PSD，一键转换为 H5
   • 自定义脚本(参考百度h5)
   • 长页h5
   • PC页面
   • 组件group
   • 多组件合组件
   • 吸附线

更多说明

前端组件说明

1. 组件以qk-为前缀，位置：client/plugins

技术栈（当前）

1. 前端：Vue.js
2. 后端：Koa
3. 存储：mongodb