https://github.com/huangwei9527/quark-h5

Quark-h5 使用 Vue2 + koa2 开发，让不会写代码的人也能轻松快速上手制作H5页面，制作网站。Quark-h5 实现了一个基于前后端架构的可视化编辑器，同时，提供了详细的开发过程和思路，展示了从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤。

---使用

Quark-h5 使用前后端分离架构，前端技术栈包括：

vue：前端模块化开发框架

vuex：状态管理

sass：css 预编译器

element-ui：vue ui 组件库

loadsh：工具类

服务端技术栈包括：

koa：Nodejs 后端 web 框架

mongodb：非关系型数据库

要在本地进行开发，首先需要准备 mongodb 服务，配置文件位于 /server/config/index.js。然后启动前端：

npm run dev-client

启动服务端：

npm run dev-server

要在本地部署，需要在全局安装 pm2：

npm install pm2 -g

使用 npm 启动：

npm run start

---Quark-h5 项目的目录结构如下

|-- client					--------前端项目界面代码
    |--common					--------前端界面对应静态资源
    |--components				--------组件
    |--config					--------配置文件
    |--eventBus					--------eventBus
    |--filter					--------过滤器
    |--mixins					--------混入
    |--pages					--------页面
    |--router					--------路由配置
    |--store					--------vuex状态管理
    |--service					--------axios封装
    |--App.vue					--------App
    |--main.js					--------入口文件
    |--permission.js			--------权限控制
|-- server					--------服务器端项目代码
    |--confog					--------配置文件
    |--controller				--------数据库链接相关
    |--extend					--------框架扩展
    |--model					-------Schema和Model
    |--middleware				--------中间件
    |--core						--------Koa MVC实现自动加载核心文件
    |--views					--------ejs页面模板
    |--public					--------静态资源
    |--router.js				--------路由
    |--app.js					--------服务端入口
|-- common					--------前后端公用代码模块（如加解密）
|-- engine-template			--------页面模板引擎，使用webpack打包成js提供页面引用
|-- docs					--------预留编写项目文档目录
|-- config.json				--------配置文件

---一个 Quark-h5 单页面的数据格式定义如下

{
	title: '', // 标题
	description: '', //描述
	coverImage: '', // 封面
	auther: '', // 作者
	script: '', // 页面插入脚本
	width: 375, // 高
	height: 644, // 宽
	pages: [], // 多页页面
	shareConfig: {}, // 分享配置
	pageMode: 0, // 渲染模式，用于扩展多种模式渲染，翻页h5/长页/PC页面等等
}

---对于多页面而言，其中一页的数据结构如下

{
	name: '',
	elements: [], // 页面元素
	commonStyle: {
		backgroundColor: '',
		backgroundImage: '',
		backgroundSize: 'cover'
	},
	config: {}
}

---而一个页面 UI 元素的而数据结构如下

{
	elName: '', // 组件名
	animations: [], // 图层的动画,可以支持多个动画
	commonStyle: {}, // 公共样式，默认样式
	events: [], // 事件配置数据，每个图层可以添加多个事件
	propsValue: {}, // 属性参数
	value: '', // 绑定值
	valueType: 'String', // 值类型
	isForm: false // 是否是表单控件，用于表单提交时获取表单数据
}

---Quark-h5编辑器左侧选择组件区域可以通过一个配置文件定义可选组件新建一个 ele-config.js 配置文件：

export default [
	{
		title: '基础组件',
		components: [
			{
				elName: 'qk-text', // 组件名，与组件库名称一致
				title: '文字',
				icon: 'iconfont iconwenben',
				// 给每个组件配置默认显示样式
				defaultStyle: {
					height: 40
				}
			}
		]
	},
	{
		title: '表单组件',
		components: []
	},
	{
		title: '功能组件',
		components: []
	},
	{
		title: '业务组件',
		components: []
	}
]

---总结

Quark-h5 基于 vue2 + koa2 实现可视化的 H5 制作工具，让不会写代码的人也能轻松快速上手制作H5页面，是一个优秀的H5制作、建站工具。其使用方便，上手即用，同时，还提供了详尽的开过步骤和过程，为相关工具的开发者和学习者提供了一个优秀的示范。