Commit 018a0082b26b73dfb1112fcf2c1f099ed9fa526d
1 parent
59800e5b
docs(quick-start.md) remove useless hint
Showing
2 changed files
with
4 additions
and
66 deletions
docs/en/getting-started/quick-start.md
| @@ -28,15 +28,8 @@ Vue.js: Front-end framework<br />Strapi.js: Open source Node.js Headless CMS to | @@ -28,15 +28,8 @@ Vue.js: Front-end framework<br />Strapi.js: Open source Node.js Headless CMS to | ||
| 28 | # by default, the current path is the root path for luban-h5 | 28 | # by default, the current path is the root path for luban-h5 |
| 29 | cd back-end/h5-api | 29 | cd back-end/h5-api |
| 30 | yarn install # install dependencies | 30 | yarn install # install dependencies |
| 31 | -yarn add psd # install dependency of psd | ||
| 32 | 31 | ||
| 33 | -# install ejs engine, mainly used for preview work | ||
| 34 | -yarn add strapi-hook-ejs | ||
| 35 | - | ||
| 36 | -# modify h5-api/hook.json (next paragraph) | ||
| 37 | -# see more details about strapi-hook-ejs:https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs#configuration | ||
| 38 | - | ||
| 39 | -npm run dev # local dev | 32 | +npm run dev # dev |
| 40 | # additional notes: run `npm run localdev` if you want to debug it in vscode | 33 | # additional notes: run `npm run localdev` if you want to debug it in vscode |
| 41 | 34 | ||
| 42 | # #!en: default database is sqlite3(db location: h5-api/.tmp/data.db) | 35 | # #!en: default database is sqlite3(db location: h5-api/.tmp/data.db) |
| @@ -45,31 +38,6 @@ npm run dev # local dev | @@ -45,31 +38,6 @@ npm run dev # local dev | ||
| 45 | # visit http://locahost:1337/admin | 38 | # visit http://locahost:1337/admin |
| 46 | ``` | 39 | ``` |
| 47 | 40 | ||
| 48 | -`h5-api/hook. json` is configured as follows: | ||
| 49 | - | ||
| 50 | -```json | ||
| 51 | -{ | ||
| 52 | - "timeout": 3000, | ||
| 53 | - "load": { | ||
| 54 | - "before": [], | ||
| 55 | - "order": [ | ||
| 56 | - "Define the hooks' load order by putting their names in this array in the right order" | ||
| 57 | - ], | ||
| 58 | - "after": [] | ||
| 59 | - }, | ||
| 60 | - "ejs": { | ||
| 61 | - "enabled": true, | ||
| 62 | - "viewExt": "ejs", | ||
| 63 | - "partial": true, | ||
| 64 | - "cache": false, | ||
| 65 | - "debug": false, | ||
| 66 | - "layout": false | ||
| 67 | - } | ||
| 68 | -} | ||
| 69 | -``` | ||
| 70 | - | ||
| 71 | - | ||
| 72 | - | ||
| 73 | ### 2. Something important | 41 | ### 2. Something important |
| 74 | 42 | ||
| 75 | 1. `403 Forbidden` :Please follow the instructions to config the API can be publicly accessible: `[Roles And Permission] -> [Public] - [Permissions]` | 43 | 1. `403 Forbidden` :Please follow the instructions to config the API can be publicly accessible: `[Roles And Permission] -> [Public] - [Permissions]` |
| @@ -121,7 +89,7 @@ previewOne: async (ctx) => { | @@ -121,7 +89,7 @@ previewOne: async (ctx) => { | ||
| 121 | #### How to build preview engine | 89 | #### How to build preview engine |
| 122 | 1. cd `front-end/h5`, run `yarn engine:build` | 90 | 1. cd `front-end/h5`, run `yarn engine:build` |
| 123 | 2. after build finished, an folder named `engine-assets` is auto generated at `back-end/h5-api/public` | 91 | 2. after build finished, an folder named `engine-assets` is auto generated at `back-end/h5-api/public` |
| 124 | -3. `preview.vue` is preview modal, the mobile div is an iframe which a wrapper for builded `engine-entry` | 92 | +3. `preview.vue` is preview modal, the mobile div is an iframe which a wrapper for builded `engine-entry`, learn more about engine here: `luban-h5/front-end/h5/vue.config.js` |
| 125 | 93 | ||
| 126 | 94 | ||
| 127 | ### 3. explanation for front-end components | 95 | ### 3. explanation for front-end components |
docs/zh/getting-started/quick-start.md
| @@ -57,14 +57,8 @@ yarn config set registry https://registry.npm.taobao.org | @@ -57,14 +57,8 @@ yarn config set registry https://registry.npm.taobao.org | ||
| 57 | # 默认当前目录为 luban 项目的根目录 | 57 | # 默认当前目录为 luban 项目的根目录 |
| 58 | cd back-end/h5-api | 58 | cd back-end/h5-api |
| 59 | yarn install # 安装依赖 | 59 | yarn install # 安装依赖 |
| 60 | -yarn add psd # 安装psd 依赖 | ||
| 61 | 60 | ||
| 62 | -# 安装 ejs 渲染引擎,主要用来预览作品 | ||
| 63 | -yarn add strapi-hook-ejs | ||
| 64 | -# 需要在 h5-api/hook.json中添加如下配置: | ||
| 65 | -# strapi-hook-ejs 更多细节参见:https://github.com/strapi/strapi/tree/master/packages/strapi-hook-ejs#configuration | ||
| 66 | - | ||
| 67 | -npm run dev # 本地开发使用 | 61 | +npm run dev |
| 68 | # 补充说明: 如果需要在 vscode 中进行debug ,请使用 npm run localdev | 62 | # 补充说明: 如果需要在 vscode 中进行debug ,请使用 npm run localdev |
| 69 | 63 | ||
| 70 | # #!en: default database is sqlite3(h5-api/.tmp/data.db) | 64 | # #!en: default database is sqlite3(h5-api/.tmp/data.db) |
| @@ -74,30 +68,6 @@ npm run dev # 本地开发使用 | @@ -74,30 +68,6 @@ npm run dev # 本地开发使用 | ||
| 74 | # visit http://locahost:1337/admin | 68 | # visit http://locahost:1337/admin |
| 75 | ``` | 69 | ``` |
| 76 | 70 | ||
| 77 | -h5-api/hook.json 配置如下: | ||
| 78 | - | ||
| 79 | -```json | ||
| 80 | -{ | ||
| 81 | - "timeout": 3000, | ||
| 82 | - "load": { | ||
| 83 | - "before": [], | ||
| 84 | - "order": [ | ||
| 85 | - "Define the hooks' load order by putting their names in this array in the right order" | ||
| 86 | - ], | ||
| 87 | - "after": [] | ||
| 88 | - }, | ||
| 89 | - "ejs": { | ||
| 90 | - "enabled": true, | ||
| 91 | - "viewExt": "ejs", | ||
| 92 | - "partial": true, | ||
| 93 | - "cache": false, | ||
| 94 | - "debug": false, | ||
| 95 | - "layout": false | ||
| 96 | - } | ||
| 97 | -} | ||
| 98 | -``` | ||
| 99 | - | ||
| 100 | - | ||
| 101 | ### 2. 注意事项 | 71 | ### 2. 注意事项 |
| 102 | 72 | ||
| 103 | 1. 本地开发,如果后端接口报错 403 Forbidden,请按照下图的操作,打开接口的访问权限接口:`[Roles And Permission] -> [Public] - [Permissions]` | 73 | 1. 本地开发,如果后端接口报错 403 Forbidden,请按照下图的操作,打开接口的访问权限接口:`[Roles And Permission] -> [Public] - [Permissions]` |
| @@ -147,7 +117,7 @@ previewOne: async (ctx) => { | @@ -147,7 +117,7 @@ previewOne: async (ctx) => { | ||
| 147 | 1. 在`front-end/h5`目录下,运行:`yarn engine:build` | 117 | 1. 在`front-end/h5`目录下,运行:`yarn engine:build` |
| 148 | 2. 构建完成之后,后端的`h5-api/public`里面会多一个文件夹 `engine-assets` | 118 | 2. 构建完成之后,后端的`h5-api/public`里面会多一个文件夹 `engine-assets` |
| 149 | 3. 打开的预览窗口`preview.vue`, 里面的预览部分对应的其实是一个 iframe,可以看看对应的源码 | 119 | 3. 打开的预览窗口`preview.vue`, 里面的预览部分对应的其实是一个 iframe,可以看看对应的源码 |
| 150 | - 也就是说,这个预览其实依赖后端的渲染引擎 比如 ejs 或者 jade 这种模板引擎,所以 `build/engine.webpack.js` 的 `output dir` 是在`back-end/h5-api/public`中的 | 120 | + 也就是说,这个预览其实依赖后端的渲染引擎,比如 ejs 或者 jade 这种模板引擎,所以参照这里:`luban-h5/front-end/h5/vue.config.js` `engineOutputDir` 变量,preview engine 构建完成,会生成到后端的 `back-end/h5-api/public/engine-assets` 目录 |
| 151 | 121 | ||
| 152 | 122 | ||
| 153 | ### 3. 前端组件说明 | 123 | ### 3. 前端组件说明 |