看文档过程中，如果发现有：

• 拼写错误
• 觉得文档很别扭的
• 觉得可以改进的
• 觉得可以在某一步再补充一下细节内容的
• 自己有个人建议的

请直接评论即可，文档迫切需要大家的 review(评论）

关于提问

我的一些期待：

1. 多读两遍：https://zhuanlan.zhihu.com/p/19779979
2. 遇到问题，自己要先尝试解决
3. 提问的话，要交代上下文 + 基本信息：比如版本号、运行环境、自己执行了哪些命令等信息，想想你是解决问题的人！

快速开始

• 重要：关于此部分有疑惑，请在下面直接评论，或者到社区讨论
• 如果您已经熟悉并已经安装了 Node>=10]、Yarn，可以直接参照下面的命令，快速上手
• 如果您不熟悉，请阅读下面的详细教程

# 后端
cd back-end/h5-api && yarn && yarn dev
# 前端
# 新开一个终端，在项目根目录执行如下命令
cd front-end/h5 && yarn && yarn build:engine && yarn dev

常见问题

这部分一般是按照下面的教程运行之后，仍然可能会遇到的问题。比较适合粗心、文档只看了一半、比较着急的同学

1. 接口 403 Forbidden，解决方案看这里：#_2-注意事项: https://www.yuque.com/luban-h5/docs/gpfy6g#16be4224
2. 弹框中的 预览页面显示空白，解决方案看这里：2. 构建预览所需的渲染引擎
3. error ReferenceError: URL is not defined ：Node.js >=10 即可

基础概念

首先你需要大概了解下 Node.js 的相关生态、Node.js 的安装 我们接下来会花几分钟介绍一下基础概念. 我们默认你知道 Linux 和 Git 的基本操作

1. Node.js、npm、nvm

1. Node.js
   服务器端的JavaScript 运行环境，你可以理解为和Python、Java等一样，它也是一门后端语言

2. npm(or yarn) Node.js 的包版本工具

   1. 类似于 Python 的pip，或 Centos 的yum，或 Ubuntu 的 apt-get
   2. 你在python 中安装requrest 库，通常是通过 pip install requests 来安装
   3. 在 Node.js 中，也是一样的，只是把 pip 换成 pip or yarn 即可： npm install requests or yarn add requests

3. nvm ：Node.js 版本工具

   1. 使用 nvm可以快速安装 Node 的某个版本，比如通过 node -v 查看你的Node 当前版本。
   2. 假如这个版本(假设当前版本为 v.8.0.0)不符合要求，你可以通过 nvm install v10.15.3 来安装 v10.15.3

2. Node、Yarn、npm 安装

1. 请参照 Strapi 的 预安装文档指导 ，安装 Node、npm 和 Yarn
2. 因为 yarn 的仓库源在海外，所以，请配置国内镜像源，提高速度

yarn config get registry
# -> https://registry.yarnpkg.com
# 改成 taobao 的源：
yarn config set registry https://registry.npm.taobao.org
# -> yarn config v0.15.0
# -> success Set "registry" to "https://registry.npm.taobao.org".
# 看到 succes 表示安装完毕

3. 技术栈(当前)

NodeJS >= 10.x

• 前端：Vue.js
• 后端：Strapi
• 存储：Sqlite

项目环境搭建

后端环境搭建

鲁班H5的后端接口，由 Strapi.js 驱动 如果遇到接口 403 问题，请看：#_2-注意事项

1. 快速上手

# 默认当前目录为 luban 项目的根目录
cd back-end/h5-api
# 使用 yarn 安装依赖，而非 yarn
# 原因参见：https://github.com/ly525/luban-h5/issues/92
yarn install # 安装依赖
yarn dev
# 补充说明: 如果需要在 vscode 中进行debug ，请使用 npm run localdev
# #!en: default database is sqlite3(h5-api/.tmp/data.db)
# #!zh: 默认数据库是 sqlite3，位置在 h5-api/.tmp/data.db
# 访问 http://localhost:1337/admin
# visit http://localhost:1337/admin
请继续阅读，进行相关配置

2. 注意事项

• 如何打开下图所示的页面呢？对于node 后端框架， 大家知道比较多的可能是 阿里的 egg.js、express.js、koa.js，鲁班H5采用的是 strapi.js 作为其后端框架，答疑:为何采用Strapi.js作为后端?

• 我们在上一步cd back-end/h5/api && yarn && yarn dev之后，就可以打开 strapi.js 其自带的管理后台了（用来管理数据库Model、接口权限、注册用户、新增用户等），本地访问地址为：http://localhost:1337/admin

• 请将右上角语言改为：zh-Hans(简体中文)，如果你是第一次访问：http://localhost:1337/admin ，那么你需要按照页面的提示进行注册下（和你正常注册淘宝一样，输入邮箱、用户名、密码、确认密码即可），这个注册只是本地注册，没有其它影响。

• 注册完成之后，就可以使用刚才注册的账号、密码登录了

1. 403本地开发，如果后端接口报错 403 Forbidden，请按照下图的操作，打开接口的访问权限接口：
   1. 访问：http://localhost:1337/admin 进行注册、登录
   2. -> [Roles And Permission]
   3. -> [Public]
   4. -> [Permissions]

<br />

1. upload权限：上传封面图使用

   

前端环境搭建

1. 快速上手

# 默认当前位置目录为 luban-h5 项目的根目录
cd front-end/h5 && yarn && yarn build:engine && yarn dev
# 更多命令请参见 project/front-end/h5/package.json

2. 构建预览所需的渲染引擎

如果在「1. 快速上手」 已经执行了 yarn build:engine，这一步可以跳过，关于此部分有疑惑，请直接到社区评论即可

1. 只需要在front-end/h5目录下，运行：yarn build:engine 即可
2. 下面的内容感兴趣可以了解，感觉内容太多可以不看

   2.1 基本原理

   作品预览的基本原理参见 previewOne，关键代码如下：

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

2.2 如何构建

1. 在front-end/h5目录下，运行：yarn build:engine
2. 构建完成之后，后端的h5-api/public里面会多一个文件夹 engine-assets
3. 打开的预览窗口preview.vue, 里面的预览部分对应的其实是一个 iframe，可以看看对应的源码
4. 这个预览其实依赖后端的模板引擎（比如 ejs、jade等）
5. 参照这里luban-h5/front-end/h5/vue.config.js的engineOutputDir 变量（这个变量就是预览引擎构建完成，生成的文件所在的目录。默认是后端的 back-end/h5-api/public/engine-assets 目录）

欢迎大家到鲁班H5-社区 交流，在这里可以提问、反馈意见和建议，与作者直接互动