前端目录

推荐先看 router.js, 再从 front-end/h5/src/views/Editor.vue 开始了解，这里是编辑器的入口

  1. front-end/h5/src                # 前端源码目录：包含编辑器、作品管理、表单统计等部分
  2. ├── assets
  3. │   ├── 403.svg
  4. │   ├── 404.svg
  5. │   ├── 500.svg
  6. │   ├── logo.png
  7. │   ├── placeholder-for-work.svg
  8. │   └── unauth-page-illustration.svg
  9. ├── components
  10. │   ├── core                    # 核心部分
  11. │   │   ├── editor              # 编辑器模块
  12. │   │   │   ├── canvas          # 画布：编辑模式 + 快速预览模式
  13. │   │   │   │   ├── edit.js     # 编辑模式对应画布
  14. │   │   │   │   └── preview.js  # 快速预览模式对应的画布
  15. │   │   │   ├── edit-panel      # 编辑器右侧的编辑、配置面板
  16. │   │   │   │   ├── action.js   #
  17. │   │   │   │   ├── props.js    # 组件属性编辑面板
  18. │   │   │   │   └── script.js   # 自定义脚本
  19. │   │   │   ├── header
  20. │   │   │   ├── modals
  21. │   │   │   │   └── preview.vue # 预览弹窗
  22. │   │   │   ├── shortcuts-panel # 插件列表对应的快捷按钮
  23. │   │   │   │   ├── index.js
  24. │   │   │   │   └── shortcut-button.js
  25. │   │   │   └── index.js
  26. │   │   ├── models              # 编辑器中的各种 model
  27. │   │   │   ├── element.js      # 插件在画布中对应的元素
  28. │   │   │   ├── page.js         # 页面
  29. │   │   │   └── work.js         # 整个H5作品
  30. │   │   ├── styles
  31. │   │   │   └── index.scss
  32. │   │   └── support             # 辅助支持部分
  33. │   │       └── shape.js        # 拖拽改变元素形状
  34. │   ├── plugins                 # 插件列表：按钮、表单(提交按钮+输入框)、文字、图片
  35. │   │   ├── lbp-button.js
  36. │   │   ├── lbp-form-button.js
  37. │   │   ├── lbp-form-input.js
  38. │   │   ├── lbp-picture-placeholder.jpg
  39. │   │   ├── lbp-picture.js
  40. │   │   └── lbp-text.js
  41. │   └── HelloWorld.vue
  42. ├── constants                  # 常量配置
  43. │   └── api.js                 # 后端 API 接口地址等配置
  44. ├── mixins                     # 加载插件
  45. │   └── load-plugins.js
  46. ├── pages
  47. │   ├── editor                 # 核心编辑器入口
  48. │   ├── home
  49. │   └── index
  50. ├── store
  51. │   ├── modules
  52. │   │   ├── editor.js
  53. │   │   ├── element.js
  54. │   │   ├── loading.js
  55. │   │   ├── page.js
  56. │   │   ├── user.js
  57. │   │   ├── visible.js
  58. │   │   └── work.js
  59. │   ├── plugins               # vuex 插件
  60. │   │   └── undo-redo         # 撤销、重做
  61. │   │       ├── History.js
  62. │   │       └── index.js
  63. │   └── index.js
  64. ├── utils
  65. │   ├── element.js
  66. │   ├── http.js
  67. │   └── strapi.js
  68. ├── views
  69. │   ├── work-manager
  70. │   │   ├── form-stat
  71. │   │   │   ├── column.js
  72. │   │   │   ├── detail.vue
  73. │   │   │   └── index.vue
  74. │   │   ├── index.vue
  75. │   │   └── list.vue
  76. │   ├── About.vue
  77. │   ├── Editor.vue           # 编辑器入口，对核心编辑器做了一层包装，在这里加载插件列表
  78. │   └── Home.vue
  79. ├── App.vue
  80. ├── engine-entry.js          # 用于在手机端预览、查看H5作品的入口
  81. ├── main.js                  # 编辑器 + work-manager(作品管理页面) 的入口
  82. ├── registerServiceWorker.js
  83. └── router.js                # 页面路由