鲁班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是一个基于Vue.js 2.0开发的移动页面生成工具，类似易企秀、Maka等知名H5制作平台。它提供了一个可视化搭建环境，使得用户可以通过简单的拖拽操作快速创建移动端网页。此项目采用了GPL-3.0许可证，并且在其开源社区中活跃度高。

主要编程语言与技术栈

• 前端：主要采用Vue.js作为核心框架，配合Ant Design Vue或其他UI库增强界面设计。
• 后端：使用Strapi，这是一个强大的Headless CMS，允许灵活地管理内容。
• 数据库：默认采用SQLite作为存储解决方案，轻量级且便于部署。

关键技术与框架

• Vue.js 2.0: 开发界面和交互逻辑。
• Strapi: 提供RESTful API，处理数据管理和业务逻辑。
• SQLite: 数据持久化存储。
• Gulp/Electron (可能用于打包): 根据实际需求可能会涉及。
• Webpack: 用于前端资源的编译和打包。

安装与配置指南

准备工作

1. Node.js与NPM/Yarn: 确保你的系统已安装Node.js(v12或更高版本)，以及NPM或Yarn包管理器。
2. Git: 用于克隆项目源代码。
3. 环境变量: 确保Git和Node的路径已添加到系统环境变量中。

详细安装步骤

步骤1: 项目克隆

打开终端或命令提示符，运行以下命令以克隆项目：

git clone https://github.com/ly525/luban-h5.git
cd luban-h5

步骤2: 安装依赖

选择你喜欢的方式安装依赖，推荐使用一键脚本来简化过程（如果想要手动控制，则跳至步骤2的手动安装部分）：

快速启动（一键脚本）

在项目根目录下执行：

./luban-h5.sh init

这将自动安装所有必要的前后端依赖并构建项目。

手动安装

如果你喜欢手动控制每个步骤：

• 对于后端，在back-end/h5-api目录下：

  cd back-end/h5-api
  yarn install
  

• 对于前端，在项目根目录执行：

  cd front-end/h5
  yarn install
  

步骤3: 运行项目

完成依赖安装后，启动项目：

./luban-h5.sh start

这将启动前后端服务，前端应用通常监听在http://localhost:1337，你可以通过这个地址来预览你的H5页面。

配置和注意事项

• SQLite数据库: 默认配置应无需额外设置，数据库文件将位于h5-api/tmp/data.db。
• API权限配置: 访问http://localhost:1337/admin，按照指示添加管理员账号并配置API权限。
• 生产环境部署: 在部署到生产环境之前，建议查看项目文档中的相关章节，特别是关于环境变量和数据库配置的部分。

确保按照以上步骤操作，即使你是技术新手，也能顺利完成鲁班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