徐烜 / bsth-ebus-h5_editor · Commits

Commit e7228d78dea22eb277397b48bd593f2a90a0ad54

Authored by ly525
1 parent 4090dcd0

docs: update local development and deployment

Inline Side-by-side
Showing 3 changed files with 382 additions and 48 deletions
docs/zh/getting-started/deployment.md
  View file @e7228d7
1 1 # Deployment/部署
2 2  
3   -## Heroku
4   -已经部署完毕，待完善
5   -
6 3 ## 阿里云/腾讯云/Digital Ocean
7   -TODO
  4 +#### 云服务器(centos)
  5 +首先需要安装一些基础的软件包，请自行安装（具体参照其官网文档）
  6 +
  7 +- node
  8 +- npm
  9 +- nginx
  10 +- yarn
  11 +- pm2
  12 +
  13 +以下脚本仅供参考
  14 +
  15 +```bash
  16 +# install yarn
  17 +curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
  18 +sudo yum install yarn -y
  19 +
  20 +# install nginx
  21 +sudo yum install nginx -y
  22 +# install pm2
  23 +npm install pm2 -g
  24 +# pm2 examples
  25 +# pm2 start server.js
  26 +# pm2 stop server
  27 +# pm2 restart server
  28 +# pm2 stop all
  29 +
  30 +```
  31 +
  32 +nginx 配置文件 demo
  33 +
  34 +```nginx
  35 +server {
  36 + listen 443;
  37 + server_name your_domain;
  38 +
  39 + client_body_buffer_size 20M;
  40 + client_max_body_size 20M;
  41 + proxy_buffer_size 20M;
  42 + proxy_buffers 32 20M;
  43 + proxy_busy_buffers_size 20M;
  44 +
  45 + ssl on;
  46 + ssl_certificate cert/luban-api.pem;
  47 + ssl_certificate_key cert/luban-api.key;
  48 + ssl_session_timeout 5s;
  49 + ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  50 + ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  51 + ssl_prefer_server_ciphers on;
  52 +
  53 + gzip on;
  54 + gzip_min_length 1k;
  55 + gzip_buffers 4 16k;
  56 + gzip_disable "MSIE [1-6]\.";
  57 + gzip_comp_level 3;
  58 + gzip_types image/png application/json text/plain application/x-javascript text/css application/xml text/javascript application/javascript;
  59 +
  60 + # TODO 这边的 psd-files、engine-assets、third-libs 开发的时候，可以走 proxy_pass
  61 + # 生产环境的时候，最好走另外的 location，直接让 nginx 访问静态文件
  62 + location ~ ^/(upload|content-manager|users-permissions|works|admin|psd-files|workforms|third-libs|engine-assets) {
  63 + proxy_set_header Host $host;
  64 + proxy_set_header X-Real-IP $remote_addr;
  65 + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  66 + proxy_pass http://localhost:1337;
  67 + }
  68 + location / {
  69 +
  70 + root /home/centos/codebase/luban/luban-h5-dist/front-end/;
  71 + #try_files $uri $uri/ /index.html;
  72 + }
  73 +
  74 +}
  75 +```
  76 +
  77 +#### 本地执行：
  78 +请先提前调研：flightplan
  79 +在项目根目录作如下操作：
  80 +
  81 +```bash
  82 +yarn add flightplan // 部署脚本，官方链接
  83 +npm run deploy:esc // 云服务器 (Elastic Compute Service, 简称 ECS)
  84 +```
  85 +
  86 +本地部署脚本
  87 +
  88 +```javascript
  89 +var os = require('os');
  90 +var plan = require('flightplan');
  91 +
  92 +// configuration
  93 +local_dist_dir = './'; // root path for luban-h5
  94 +remote_project_dir = '~/codebase/luban/luban-h5'; // root path for luban-h5 on server
  95 +remote_project_api_dir = '~/codebase/luban/luban-h5/back-end/h5-api'; // api root path for luban-h5 on server
  96 +
  97 +// production server config
  98 +plan.target('production', {
  99 + host: 'your host ip', // your server ip
  100 + username: 'centos', // your server username
  101 + // 更新为绝对路径
  102 + privateKey: `${os.homedir}/.ssh/id_rsa` // your privateKey to rsync files
  103 +});
  104 +
  105 +/**
  106 + * 1. setup folders
  107 + * 2. sync files
  108 + * 3. install dependencies
  109 + * 4. (re)start api service
  110 + * 5. soft link nginx conf
  111 + *
  112 + * 1. 创建同步文件件
  113 + * 2. 同步本地在 git 中的文件（你也可以在服务器端git clone）
  114 + * 3. 在 h5-api 目录安装依赖
  115 + * 4. 使用pm2 重启服务
  116 + * 5. 给 nginx 文件做一个软件链接
  117 + *
  118 + */
  119 +
  120 +// init remove server path
  121 +// 在第一步的时候，需要打开这一项：初始化服务器，现在还不完整，需要补充
  122 +// plan.remote(remote => {
  123 +// // remove.exec(`mkdir -p ${remote_project_dir}`)
  124 +// remove.sudo(`yum install nginx -y`)
  125 +// remote.with(`mkdir -p ${remote_project_dir}`, () => {
  126 +// // remote.log('Install dependencies');
  127 +// // remote.exec('yarn');
  128 +// remote.exec('pwd');
  129 +// });
  130 +// });
  131 +
  132 +
  133 +// run commands on localhost
  134 +plan.local(local => {
  135 + // local.log('=> Run build');
  136 + // local.exec('npm run build');
  137 + // local.log('=> Build finish');
  138 +
  139 + local.log('=> Copy files to remote hosts');
  140 + // TODO reference: https://github.com/pstadler/flightplan/issues/142
  141 + local.with(`cd ${local_dist_dir}`, () => {
  142 + // const filesToCopy = local.exec('find . -type f', { silent: true })
  143 + const filesToCopy = local.git('ls-files', {silent: true}) // get list of files under version control
  144 +
  145 + local.transfer(filesToCopy, remote_project_dir);
  146 + local.log('=> Copy finish');
  147 +
  148 + });
  149 +});
  150 +
  151 +// run commands on the target's remote hosts
  152 +plan.remote(remote => {
  153 + remote.with(`cd ${remote_project_api_dir}`, () => {
  154 + remote.log('Install dependencies');
  155 + remote.exec('yarn');
  156 + remote.exec('pm2 restart server')
  157 + });
  158 +});
  159 +
  160 +
  161 +```
  162 +
  163 +
  164 +
  165 +#### 中间可能遇到的一些问题：
  166 +
  167 +1. `Cannot parse privateKey: Unsupported key format` 
  168 +解决方案请参照：[Cannot parse privateKey: Unsupported key format](https://stackoverflow.com/questions/53400628/cannot-parse-privatekey-unsupported-key-format)
  169 +
8 170  
9 171 ## Docker 部署
10   -TODO
  172 +
  173 +> 以下方案来自：[https://github.com/yi-ge/luban-h5#docker-%E9%83%A8%E7%BD%B2](https://github.com/yi-ge/luban-h5#docker-%E9%83%A8%E7%BD%B2)，非常非常感谢。
  174 +> 但仅供参考，此方案不是鲁班的官方的解决方案
  175 +>
  176 +> 鲁班决定暂时不按照这种方案来做，可以先使用上面部署脚本来发布到服务器上，进行部署。
  177 +> 鲁班后期考虑出一个简单版本docker image的部署方案，直接拉镜像，在服务器端就能直接跑起来。
  178 +>
  179 +
  180 +请确保您的`80`端口和`443`端口均打开，如果已经配置了其它项目，请进行手工调整。
  181 +
  182 +1. 修改`yourdomain.tld`为您的前端域名并解析到服务器。
  183 +1. 修改`api.yourdomain.tld`为您的后端域名并解析到服务器。
  184 +1. 依次执行以下命令。
  185 +
  186 +```bash
  187 +# Clone luban-h5
  188 +git clone https://github.com/ly525/luban-h5.git
  189 +cd luban-h5
  190 +
  191 +# Install require package
  192 +docker run --rm -v `pwd`:/root -w /root/back-end/h5-api node:12.8.1 bash -c "yarn && NODE_ENV=production yarn build"
  193 +
  194 +docker run --rm -v `pwd`:/root -w /root/front-end/h5 \
  195 + --env "PUBLIC_PATH=/" \
  196 + --env "PROD_API_ORIGIN=api.yourdomain.tld" \
  197 + node:12.8.1 bash -c "yarn && NODE_ENV=production yarn build && node build/engine.webpack.js"
  198 +
  199 +# Start back-end
  200 +docker run --detach \
  201 + --name nginx-proxy \
  202 + --publish 80:80 \
  203 + --publish 443:443 \
  204 + --volume /etc/nginx/certs \
  205 + --volume /etc/nginx/vhost.d \
  206 + --volume /usr/share/nginx/html \
  207 + --volume /var/run/docker.sock:/tmp/docker.sock:ro \
  208 + jwilder/nginx-proxy
  209 +
  210 +docker run --detach \
  211 + --name nginx-proxy-letsencrypt \
  212 + --volumes-from nginx-proxy \
  213 + --volume /var/run/docker.sock:/var/run/docker.sock:ro \
  214 + jrcs/letsencrypt-nginx-proxy-companion
  215 +
  216 +docker run -itd -m 512m \
  217 + --restart=always \
  218 + --name luban-h5-front \
  219 + -v `pwd`/front-end/h5/dist:/usr/share/nginx/html \
  220 + --env "NODE_ENV=production" \
  221 + --env "VIRTUAL_HOST=yourdomain.tld" \
  222 + --env "LETSENCRYPT_HOST=yourdomain.tld" \
  223 + --env "PROD_API_ORIGIN=api.yourdomain.tld" \
  224 + nginx
  225 +
  226 +# Start font-end
  227 +docker run -itd -m 1024m \
  228 + --name luban-h5-api \
  229 + --restart=always \
  230 + -v `pwd`:/root -w /root/back-end/h5-api \
  231 + -p 1337:1337 \
  232 + --env "NODE_ENV=production" \
  233 + --env "VIRTUAL_PORT=1337" \
  234 + --env "VIRTUAL_HOST=api.yourdomain.tld" \
  235 + --env "LETSENCRYPT_HOST=api.yourdomain.tld" \
  236 + --restart=always node:12.8.1 \
  237 + yarn start
  238 +```
  239 +
  240 +稍等片刻，访问`https://你的域名`，部署完成。
  241 +
  242 +关于Nginx、SSL的配置，可以参考：[https://github.com/JrCs/docker-letsencrypt-nginx-proxy-companion](https://github.com/JrCs/docker-letsencrypt-nginx-proxy-companion)
  243 +
  244 +
  245 +
  246 +---
  247 +
  248 +docker 自我学习，请忽略
  249 +
  250 +```bash
  251 +docker --rm
  252 + 相当于：
  253 + 1. docker run hello-world(hello-world为image-name)
  254 + 2. docker rm hello-world-container-id(通过 docker ps -a 查看)
  255 +
  256 + 在Docker容器退出时，默认容器内部的文件系统仍然被保留，以方便调试并保留用户数据。
  257 + 但是，对于foreground容器，由于其只是在开发调试过程中短期运行，其用户数据并无保留的必要，因而可以在容器启动时设置--rm选项，这样在容器退出时就能够自动清理容器内部的文件系统。示例如下：
  258 + docker run --rm bba-208等价于docker run --rm=true bba-208。
  259 + 显然，--rm选项不能与-d同时使用，即只能自动清理foreground容器，不能自动清理detached容器
  260 + 注意，--rm选项也会清理容器的匿名data volumes。
  261 + 所以，执行docker run命令带--rm命令选项，等价于在容器退出后，执行docker rm -v。
  262 +
  263 +
  264 +Docker命令详解（run篇）
  265 + 命令格式：docker run [OPTIONS] IMAGE [COMMAND] [ARG...]
  266 + Usage: Run a command in a new container
  267 + 中文意思为：通过run命令创建一个新的容器（container）
  268 +
  269 + 常用选项说明
  270 + -d, --detach=false， 指定容器运行于前台还是后台，默认为false
  271 + -i, --interactive=false， 打开STDIN，用于控制台交互
  272 + -t, --tty=false， 分配tty设备，该可以支持终端登录，默认为false
  273 + -u, --user=""， 指定容器的用户
  274 + -a, --attach=[]， 登录容器（必须是以docker run -d启动的容器）
  275 + -w, --workdir=""， 指定容器的工作目录
  276 + -c, --cpu-shares=0， 设置容器CPU权重，在CPU共享场景使用
  277 + -e, --env=[]， 指定环境变量，容器中可以使用该环境变量
  278 + -m, --memory=""， 指定容器的内存上限
  279 + -P, --publish-all=false， 指定容器暴露的端口
  280 + -p, --publish=[]， 指定容器暴露的端口
  281 + -h, --hostname=""， 指定容器的主机名
  282 + -v, --volume=[]， 给容器挂载存储卷，挂载到容器的某个目录
  283 + --volumes-from=[]， 给容器挂载其他容器上的卷，挂载到容器的某个目录
  284 + --cap-add=[]， 添加权限，权限清单详见：http://linux.die.net/man/7/capabilities
  285 + --cap-drop=[]， 删除权限，权限清单详见：http://linux.die.net/man/7/capabilities
  286 + --cidfile=""， 运行容器后，在指定文件中写入容器PID值，一种典型的监控系统用法
  287 + --cpuset=""， 设置容器可以使用哪些CPU，此参数可以用来容器独占CPU
  288 + --device=[]， 添加主机设备给容器，相当于设备直通
  289 + --dns=[]， 指定容器的dns服务器
  290 + --dns-search=[]， 指定容器的dns搜索域名，写入到容器的/etc/resolv.conf文件
  291 + --entrypoint=""， 覆盖image的入口点
  292 + --env-file=[]， 指定环境变量文件，文件格式为每行一个环境变量
  293 + --expose=[]， 指定容器暴露的端口，即修改镜像的暴露端口
  294 + --link=[]， 指定容器间的关联，使用其他容器的IP、env等信息
  295 + --lxc-conf=[]， 指定容器的配置文件，只有在指定--exec-driver=lxc时使用
  296 + --name=""， 指定容器名字，后续可以通过名字进行容器管理，links特性需要使用名字
  297 + --net="bridge"， 容器网络设置:
  298 + bridge 使用docker daemon指定的网桥
  299 + host //容器使用主机的网络
  300 + container:NAME_or_ID >//使用其他容器的网路，共享IP和PORT等网络资源
  301 + none 容器使用自己的网络（类似--net=bridge），但是不进行配置
  302 + --privileged=false， 指定容器是否为特权容器，特权容器拥有所有的capabilities
  303 + --restart="no"， 指定容器停止后的重启策略:
  304 + no：容器退出时不重启
  305 + on-failure：容器故障退出（返回值非零）时重启
  306 + always：容器退出时总是重启
  307 + --rm=false， 指定容器停止后自动删除容器(不支持以docker run -d启动的容器)
  308 + --sig-proxy=true， 设置由代理接受并处理信号，但是SIGCHLD、SIGSTOP和SIGKILL不能被代理
  309 + 示例
  310 + 运行一个在后台执行的容器，同时，还能用控制台管理：docker run -i -t -d ubuntu:latest
  311 + 运行一个带命令在后台不断执行的容器，不直接展示容器内部信息：docker run -d ubuntu:latest ping www.docker.com
  312 + 运行一个在后台不断执行的容器，同时带有命令，程序被终止后还能重启继续跑，还能用控制台管理，docker run -d --restart=always ubuntu:latest ping www.docker.com
  313 + 为容器指定一个名字，docker run -d --name=ubuntu_server ubuntu:latest
  314 + 容器暴露80端口，并指定宿主机80端口与其通信(: 之前是宿主机端口，之后是容器需暴露的端口)，docker run -d --name=ubuntu_server -p 80:80 ubuntu:latest
  315 + 指定容器内目录与宿主机目录共享(: 之前是宿主机文件夹，之后是容器需共享的文件夹)，docker run -d --name=ubuntu_server -v /etc/www:/var/www ubuntu:latest
  316 +```
  317 +
  318 +
  319 +## Heroku
  320 +> 因为 Strapi + postgresql  在 Heroku 上还有一些坑，需要官方解决，这个方案暂时pending
11 321  
12 322 ---
13 323  
... ...
docs/zh/getting-started/features.md
  View file @e7228d7
1 1 # Features
2 2  
3 3 ### 编辑器
4   -
5   - - [x] 参考线
6   - - [x] 吸附线、组件对齐
7   - - [x] 拖拽改变组件形状
8   - - [x] 元素: 复制（画布）
9   - - [x] 元素: 删除（画布）
10   - - [x] 元素: 编辑（画布）
11   - - [x] 页面：新增
12   - - [x] 页面：复制
13   - - [x] 页面：删除
14   - - [x] 快速预览
15   - - [x] 撤销、重做
  4 +- [x] 参考线
  5 +- [x] 吸附线、组件对齐
  6 +- [x] 拖拽改变组件形状
  7 +- [x] 元素: 复制（画布）
  8 +- [x] 元素: 删除（画布）
  9 +- [x] 元素: 编辑（画布）
  10 +- [x] 页面：新增
  11 +- [x] 页面：复制
  12 +- [x] 页面：删除
  13 +- [x] 快速预览
  14 +- [x] 撤销、重做
16 15  
17 16 ### 组件系统
18   - - [x] 文字
19   - - [x] 普通按钮
20   - - [x] 表单按钮
21   - - [x] 表单输入框
22   - - [x] 普通图片
23   - - [ ] 背景图
24   - - [ ] 视频（Iframe形式）
25   -
26   -### 增强功能
27   - - [ ] 上传 PSD，一键转换为 H5(已经调研，可以实现)
28   - - [ ] 图片库
29   - - [ ] 第三方无版权图片搜索
30   - - [ ] 自定义脚本(已经调研，可以实现)
  17 +#### 基础组件
  18 +
  19 +- [x] 普通文字
  20 +- [x] 普通按钮
  21 +- [x] 普通图片
  22 +- [ ] 背景图
  23 +- [ ] 视频（Iframe形式）
  24 +
  25 +#### 表单组件
  26 +
  27 +- [x] 表单按钮
  28 +- [x] 表单输入框
  29 +- [x] 表单单选框
  30 +- [x] 表单多选框
  31 +
  32 +
  33 +### 增强功能[已开放]
  34 +
  35 +- [x] 模板列表
  36 +- [x] 基于模板制作H5
  37 +- [x] 保存作品为模板
  38 +- [ ] 图片库
  39 +- [ ] 第三方无版权图片搜索
  40 +- [ ] SSO 登录、第三方登录
  41 +
  42 +
  43 +### 增强功能[暂未开放]
  44 +> 已经调研，可以实现，高级功能，暂未开放
  45 +
  46 +- [x] 上传 PSD，一键转换为 H5
  47 +- [x] 自定义脚本
  48 +
31 49  
32 50 ### 后端 API
33   - - [x] 创建、保存、更新作品
34   - - [x] 表单数据收集
35   - - [x] 表单数据展示
36   - - [x] 在线预览
37   - - [x] 二维码预览
  51 +
  52 +- [x] 创建、保存、更新作品
  53 +- [x] 表单数据收集
  54 +- [x] 表单数据展示
  55 +- [x] 在线预览
  56 +- [x] 二维码预览
38 57  
39 58 ---
40 59  
... ...
docs/zh/getting-started/quick-start.md
  View file @e7228d7
1 1 # 快速开始
2 2  
3   -# 概述
4 3 ## 基础概念
5 4 > 首先你需要大概了解下 Node.js 的相关生态、Node.js 的安装
6 5 我们接下来会花一分钟介绍一下基础概念. 我们默认你知道 Linux 和 Git 的基本操作
... ... @@ -19,7 +18,7 @@
19 18 > 1. 假如这个版本(假设当前版本为 v.8.0.0)不符合要求，你可以通过 `nvm install v10.15.3` 来安装 `v10.15.3` 
20 19  
21 20  
22   -### Node、Yarn、npm 安装
  21 +### Node、Yarn、npm 安装
23 22  
24 23 1. 请参照 [Strapi 的 预安装文档指导](https://strapi.io/documentation/3.0.0-beta.x/getting-started/install-requirements.html#installation-requirements) ，安装 Node、npm 和 Yarn
25 24 1. 因为 yarn 的仓库源在海外，所以，请配置国内镜像源，提高速度
... ... @@ -27,7 +26,7 @@
27 26 ```bash
28 27  
29 28 yarn config get registry
30   -# -> https://registry.yarnpkg.com
  29 +# -> https://registry.yarnpkg.com
31 30  
32 31 # 改成 taobao 的源：
33 32 yarn config set registry https://registry.npm.taobao.org
... ... @@ -38,14 +37,15 @@ yarn config set registry https://registry.npm.taobao.org
38 37 ```
39 38  
40 39 ## 技术栈(当前)
41   -前端：Vue.js
42   -后端：Strapi
43   -存储：Sqlite
  40 +- 前端：Vue.js
  41 +- 后端：Strapi
  42 +- 存储：Sqlite
44 43  
45 44 # 项目环境搭建
46 45  
47 46 1. 鲁班H5的后端接口，由 [Strapi](https://github.com/strapi/strapi/) 强力驱动
48   -1. 后端部分文档会尽量和 `[github-后端部分文档说明(project/back-end/h5-api/README.md)](https://github.com/ly525/luban-h5/blob/dev/back-end/h5-api/README.md)`保持同步
  47 +1. 后端部分文档会尽量和 `[github-后端部分文档说明(project/back-end/h5-api/README.md)](https://github.com/ly525/luban-h5/blob/dev/back-end/h5-api/README.md)`保持同步
  48 +
49 49 ## 后端环境搭建
50 50 ### 1. 快速上手
51 51  
... ... @@ -56,7 +56,7 @@ yarn install # 安装依赖
56 56 yarn add psd # 安装psd 依赖
57 57  
58 58 # 安装 ejs 渲染引擎，主要用来预览作品
59   -yarn add strapi-hook-ejs
  59 +yarn add strapi-hook-ejs
60 60 # 需要在 h5-api/hook.json中添加如下配置：
61 61 # strapi-hook-ejs 更多细节参见：https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs#configuration
62 62  
... ... @@ -96,7 +96,7 @@ h5-api/hook.json 配置如下：
96 96  
97 97 ### 2. 注意事项
98 98  
99   -1. 本地开发，如果后端接口报错 403 Forbidden，请按照下图的操作，打开接口的访问权限接口：`[Roles And Permission] -> [Public] - [Permissions]`  
  99 +1. 本地开发，如果后端接口报错 403 Forbidden，请按照下图的操作，打开接口的访问权限接口：`[Roles And Permission] -> [Public] - [Permissions]`
100 100  
101 101 ![](https://cdn.nlark.com/yuque/0/2019/png/358499/1567438464273-e0892ee2-5dca-45ec-a528-8090d80b23bd.png#align=left&display=inline&height=1016&originHeight=1016&originWidth=1906&size=0&status=done&width=1906)
102 102  
... ... @@ -112,7 +112,7 @@ error TypeError: ctx.render is not a function
112 112 ```
113 113  
114 114 ## 前端环境搭建
115   -这部分会尽量和  `[project/front-end/h5/README.md](https://github.com/ly525/luban-h5/blob/dev/front-end/h5/README.md)` 保持同步
  115 +这部分会尽量和 `[project/front-end/h5/README.md](https://github.com/ly525/luban-h5/blob/dev/front-end/h5/README.md)` 保持同步
116 116  
117 117 ### 1. 快速上手
118 118  
... ... @@ -124,16 +124,21 @@ yarn # install dependencies
124 124 yarn serve # develop
125 125  
126 126 # 更多命令
127   -请参见 project/front-end/h5/package.json
  127 +请参见 project/front-end/h5/package.json
128 128 ```
129 129  
130 130 ### 2. 构建预览所需的渲染引擎
131   -> 参见 [https://www.yuque.com/liuyan-ew1qk/luban-h5-docs/gmk13a#962e6e56](https://www.yuque.com/liuyan-ew1qk/luban-h5-docs/gmk13a#962e6e56)
  131 +1. 在 front-end/h5 目录下，运行：`node build/engine.webpack.js` (这个是用来生成预览引擎的东西)
  132 +2. 构建完成之后,看下 后端的 `h5-api/public` 里面会多一个文件夹 `engine-assets`
  133 +3. 打开的预览窗口（preview.vue）,里面的预览部分对应的其实是一个 iframe，可以看看对应的源码
  134 + 也就是说，这个预览其实依赖后端的渲染引擎 比如 ejs 或者 jade 这种模板引擎，所以 `build/engine.webpack.js` 的 `output dir` 是在`back-end/h5-api/public`中的
132 135  
133 136  
134 137 ### 3. 前端组件说明
135 138  
136 139 1. `lbp-`
137   -
138 140 全称为 `lu-ban-plugin:``鲁班H5的插件`，位置：`front-end/h5/src/components/plugins`
139 141  
  142 +---
  143 +
  144 +<Vssue issueId="6" />
140 145 \ No newline at end of file
... ...