徐烜 / bsth-ebus-h5_editor · Commits

Commit c98ef706b830fe46322ccc0c1f721a29d7129009

Authored by ly525
1 parent a6920bbd

update README: add file-tree and comment for front-end source code

Inline Side-by-side
Showing 1 changed file with 94 additions and 1 deletions
README.md
  View file @c98ef70
@@ -9,6 +9,8 @@ @@ -9,6 +9,8 @@
9 * [前端组件说明](#%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E8%AF%B4%E6%98%8E) 9 * [前端组件说明](#%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E8%AF%B4%E6%98%8E)
10 * [技术栈（当前）](#%E6%8A%80%E6%9C%AF%E6%A0%88%E5%BD%93%E5%89%8D) 10 * [技术栈（当前）](#%E6%8A%80%E6%9C%AF%E6%A0%88%E5%BD%93%E5%89%8D)
11 - [👨🏻‍💻👩🏻‍💻交流群](#%E4%BA%A4%E6%B5%81%E7%BE%A4) 11 - [👨🏻‍💻👩🏻‍💻交流群](#%E4%BA%A4%E6%B5%81%E7%BE%A4)
  12 +- [代码目录说明](#代码目录说明)
  13 + * [前端部分](#前端部分)
12 14
13 ### 鲁班H5是什么？ 15 ### 鲁班H5是什么？
14 鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似[易企秀](http://www.eqxiu.com/)、[百度 H5](https://h5.baidu.com) 等工具 16 鲁班H5是基于Vue2.0开发的，通过拖拽的形式，生成页面的工具，类似[易企秀](http://www.eqxiu.com/)、[百度 H5](https://h5.baidu.com) 等工具
@@ -17,6 +19,8 @@ @@ -17,6 +19,8 @@
17 ### Screenshots 19 ### Screenshots
18 > [在线访问地址](https://ly525.github.io/luban-h5) 20 > [在线访问地址](https://ly525.github.io/luban-h5)
19 21
  22 +> [更多作品演示图片，点击查看](https://github.com/ly525/luban-h5/issues/15)
  23 +
20 ![image](https://user-images.githubusercontent.com/12668546/61186568-974b1c80-a699-11e9-831b-a87a506699b9.png) 24 ![image](https://user-images.githubusercontent.com/12668546/61186568-974b1c80-a699-11e9-831b-a87a506699b9.png)
21 25
22 26
@@ -87,4 +91,93 @@ @@ -87,4 +91,93 @@
87 91
88 > For users in other languages, please keep using Github issue tracker. 🤟 92 > For users in other languages, please keep using Github issue tracker. 🤟
89 93
90 -<img src="https://user-images.githubusercontent.com/12668546/62009529-d184e580-b192-11e9-93ba-e23c1fb5c72a.png" width="650px"> 94 +<img src="https://user-images.githubusercontent.com/12668546/62009529-d184e580-b192-11e9-93ba-e23c1fb5c72a.png" width="500px">
  95 +
  96 +
  97 +### 代码目录说明
  98 +#### 前端部分
  99 +> 推荐先看 router.js, 再从 front-end/h5/src/views/Editor.vue 开始了解，这里是编辑器的入口
  100 +
  101 + front-end/h5/src # 前端源码目录：包含编辑器、作品管理、表单统计等部分
  102 + ├── assets
  103 + │ ├── 403.svg
  104 + │ ├── 404.svg
  105 + │ ├── 500.svg
  106 + │ ├── logo.png
  107 + │ ├── placeholder-for-work.svg
  108 + │ └── unauth-page-illustration.svg
  109 + ├── components
  110 + │ ├── core # 核心部分
  111 + │ │ ├── editor # 编辑器模块
  112 + │ │ │ ├── canvas # 画布：编辑模式 + 快速预览模式
  113 + │ │ │ │ ├── edit.js # 编辑模式对应画布
  114 + │ │ │ │ └── preview.js # 快速预览模式对应的画布
  115 + │ │ │ ├── edit-panel # 编辑器右侧的编辑、配置面板
  116 + │ │ │ │ ├── action.js #
  117 + │ │ │ │ ├── props.js # 组件属性编辑面板
  118 + │ │ │ │ └── script.js # 自定义脚本
  119 + │ │ │ ├── header
  120 + │ │ │ ├── modals
  121 + │ │ │ │ └── preview.vue # 预览弹窗
  122 + │ │ │ ├── shortcuts-panel # 插件列表对应的快捷按钮
  123 + │ │ │ │ ├── index.js
  124 + │ │ │ │ └── shortcut-button.js
  125 + │ │ │ └── index.js
  126 + │ │ ├── models # 编辑器中的各种 model
  127 + │ │ │ ├── element.js # 插件在画布中对应的元素
  128 + │ │ │ ├── page.js # 页面
  129 + │ │ │ └── work.js # 整个H5作品
  130 + │ │ ├── styles
  131 + │ │ │ └── index.scss
  132 + │ │ └── support # 辅助支持部分
  133 + │ │ └── shape.js # 拖拽改变元素形状
  134 + │ ├── plugins # 插件列表：按钮、表单(提交按钮+输入框)、文字、图片
  135 + │ │ ├── lbp-button.js
  136 + │ │ ├── lbp-form-button.js
  137 + │ │ ├── lbp-form-input.js
  138 + │ │ ├── lbp-picture-placeholder.jpg
  139 + │ │ ├── lbp-picture.js
  140 + │ │ └── lbp-text.js
  141 + │ └── HelloWorld.vue
  142 + ├── constants # 常量配置
  143 + │ └── api.js # 后端 API 接口地址等配置
  144 + ├── mixins # 加载插件
  145 + │ └── load-plugins.js
  146 + ├── pages
  147 + │ ├── editor # 核心编辑器入口
  148 + │ ├── home
  149 + │ └── index
  150 + ├── store
  151 + │ ├── modules
  152 + │ │ ├── editor.js
  153 + │ │ ├── element.js
  154 + │ │ ├── loading.js
  155 + │ │ ├── page.js
  156 + │ │ ├── user.js
  157 + │ │ ├── visible.js
  158 + │ │ └── work.js
  159 + │ ├── plugins # vuex 插件
  160 + │ │ └── undo-redo # 撤销、重做
  161 + │ │ ├── History.js
  162 + │ │ └── index.js
  163 + │ └── index.js
  164 + ├── utils
  165 + │ ├── element.js
  166 + │ ├── http.js
  167 + │ └── strapi.js
  168 + ├── views
  169 + │ ├── work-manager
  170 + │ │ ├── form-stat
  171 + │ │ │ ├── column.js
  172 + │ │ │ ├── detail.vue
  173 + │ │ │ └── index.vue
  174 + │ │ ├── index.vue
  175 + │ │ └── list.vue
  176 + │ ├── About.vue
  177 + │ ├── Editor.vue # 编辑器入口，对核心编辑器做了一层包装，在这里加载插件列表
  178 + │ └── Home.vue
  179 + ├── App.vue
  180 + ├── engine-entry.js # 用于在手机端预览、查看H5作品的入口
  181 + ├── main.js # 编辑器 + work-manager(作品管理页面) 的入口
  182 + ├── registerServiceWorker.js
  183 + └── router.js # 页面路由