/quark-h5

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

Primary LanguageJavaScript

夸克 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