鲁班H5可视化搭建工具快速入门指南

鲁班H5可视化搭建工具快速入门指南

luban-h5 [WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统. 项目地址: https://gitcode.com/gh_mirrors/lu/luban-h5

前言

鲁班H5是一款基于现代Web技术栈的可视化H5页面搭建工具，它允许用户通过拖拽方式快速构建响应式H5页面。本文将详细介绍如何从零开始搭建鲁班H5的开发环境，帮助开发者快速上手。

技术栈概览

在开始之前，让我们先了解鲁班H5采用的主要技术：

1. 前端框架：Vue.js - 渐进式JavaScript框架
2. 后端服务：Strapi.js - 基于Node.js的开源无头CMS
3. 数据库：SQLite - 轻量级关系型数据库

环境准备

基础软件安装

1. Node.js：建议安装LTS版本（当前推荐v14.x或更高）
2. Yarn：推荐使用Yarn作为包管理工具（版本1.22.x或更高）
3. Git：版本控制工具

后端服务搭建

1. 快速启动

# 进入后端目录
cd back-end/h5-api

# 使用Yarn安装依赖（注意：不要使用npm）
yarn install

# 启动开发服务器
yarn dev

# 如需在VSCode中调试，可使用
yarn localdev

默认使用SQLite数据库，数据文件位于h5-api/.tmp/data.db。

启动成功后，可通过http://localhost:1337/admin访问管理后台。

2. 重要配置

解决403 Forbidden问题

为确保API可公开访问，需进行以下配置：

1. 进入管理后台的"Roles And Permission"部分
2. 选择"Public"角色
3. 在权限设置中，勾选所有必要的API访问权限

上传封面配置

如需使用封面上传功能，需确保文件上传相关权限已正确配置。

前端开发环境搭建

1. 快速启动

# 进入前端目录
cd front-end/h5

# 安装依赖并启动开发服务器
yarn && yarn build:engine && yarn dev

2. 预览引擎构建

预览功能依赖于单独构建的引擎，构建步骤如下：

1. 进入前端目录：cd front-end/h5
2. 执行构建命令：yarn build:engine

构建完成后，会在back-end/h5-api/public目录下自动生成engine-assets文件夹。

技术细节

预览功能的核心代码位于后端控制器的previewOne方法中：

previewOne: async (ctx) => {
  const work = await strapi.services.work.findOne(ctx.params);
  return ctx.render('engine', { work });
}

常见问题解决方案

1. API返回403错误

解决方案：按照上述"重要配置"部分设置Public角色的API访问权限。

2. 预览页面显示空白

解决方案：确保已正确构建预览引擎（执行yarn build:engine命令）。

开发建议

1. 保持依赖一致：始终使用Yarn而非npm管理依赖
2. 调试技巧：前端项目可使用Vue Devtools进行调试
3. 代码结构：
   • 后端逻辑主要在back-end/h5-api目录
   • 前端代码主要在front-end/h5目录
   • 预览引擎配置参考vue.config.js文件

结语

通过本文的指导，您应该已经成功搭建了鲁班H5的开发环境。建议初次接触的开发者先熟悉项目结构，再逐步深入了解各模块的实现细节。后续可根据实际需求进行功能扩展或定制开发。

如需进一步了解特定功能的实现原理，可查阅项目中的相关代码注释和技术文档。

luban-h5 [WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统. 项目地址: https://gitcode.com/gh_mirrors/lu/luban-h5