Appearance
前置基础知识准备
前置基础知识准备
后面的章节我们将会帮助大家从 0 到 1 建立一个对 H5 可视化搭建的知识体系和实现方式，在我们开始阅读下面章节之前，我们还是需要先做一下“热身”工作，准备一些必要的基础知识，方便我们在后续的学习中能快速实现和理解一些细节。
可视化搭建的一些概念
1. 远程组件
在我们的可视化搭建体系，总会出现一些多业务线共用一个组件的场景，如果各业务团队向框架中提供一些私有的展示组件，但是这些组件并不能和框架一起打包，因为框架不能因为某个私有模块的频繁变更而重复构建发布。在这种场景下我们需要一个加载远程异步代码的组件来完成将这些组件加载到框架中。
2. lowcode
低代码开发是一种可视化应用开发方法。通过低代码开发，不同经验水平的开发人员能够通过图形用户界面，使用拖放式组件和模型驱动逻辑来创建 Web 和移动应用。低代码开发平台减轻了非技术开发人员的压力，帮其免去了代码编写工作，同时也为专业开发人员提供了支持，帮助他们提取应用开发过程中的繁琐底层架构与基础设施任务。业务和 IT 部门的开发人员可以在平台中协同，创建、迭代和发布应用，而所需时间只是传统方法的一小部分。
3. 页面模板和全局组件
页面模板是对同一类型页面的抽象，可以通过模板来衍生出各种形式的页面，模板中可以涵盖各种类型的组件，我们称这些组件为模板组件，模板组件是无法进行跨模板共享，只用用于当前页面使用。全局组件 是远程组件的实现方式，可以用来跨多模板共享。一些通用的模板组件，可以被抽离成一系列全局组件。
vue3
接下来的我们 H5 搭建体系的编辑器主要是基于 vue3 来编码的，vue3 新特性比较多，我们这个小册的重点不是介绍如何使用 vue3。我们有更重要的事情要做，所以我简单概括了一下，我们需要提前准备的 vue3 的一些知识点和生态，有不懂的同学可以后续去补课：
- CompositionAPI
- 如果之前又用过 vue2 的同学，可以了解一下 vue3 的非兼容变更特性
- 从 v4.5.0 开始，vue-cli 提供了内置选项，可在创建新项目时选择
Vue 3预设。 - 在 vue3 中使用 jsx 后面小册会介绍在什么场景下使用 jsx 会更加方便。
- Vue Router 4.0 提供了 Vue 3 支持
- Vuex 4.0 提供了 Vue 3 支持，其 API 与 3.x 基本相同。唯一的突破性变化是插件的安装方式。
组件库
基于上面的前端框架选项，我们采用的是 vue3 所以组件库我们可以采用市面上比较流行的且支持 vue3 的框架，综合比较下来，我们可以选择的有 Element plus 和 antdv 2x 但是综合比较下来 antdv 2x 的生态和组件的丰富度以及使用度上面都优于 element-plus。所以我们也是计划采用 antdv 来作为我们的主要组件库。后面说到设计 动态表单 的时候也离不开组件库，antdv 对 JSX 的支持也是非常友好。
egg
要做编辑、发布、数据存贮工作，当然离不开服务端。这里我们可以选择前端较为熟悉的 nodejs 作为我们的服务端语言。我们可以配合着 nodejs 再选择一个适合的框架来提高我们的开发效率。为什么是egg?
nodejs 框架业界也比较多，比如 express、koa、nest、fastify、egg、Sails.... 考虑到应用本身，需要有在追求规范和共建的同时，还需要考虑如何平衡不同团队之间的差异，求同存异这样一套企业级架构，支持渐进式可扩展的开发方式。
Sails 是和 Egg 一样奉行『约定优于配置』的框架，扩展性也非常好。但是相比 Egg，Sails 支持 Blueprint REST API、WaterLine 这样可扩展的 ORM、前端集成、WebSocket 等，但这些功能都是由 Sails 提供的。而 Egg 不直接提供功能，只是集成各种功能插件，比如实现 egg-blueprint，egg-waterline 等这样的插件，再使用 sails-egg 框架整合这些插件就可以替代 Sails 了
Express 是 Node.js 社区广泛使用的框架，简单且扩展性强，非常适合做个人项目。但框架本身缺少约定，标准的 MVC 模型会有各种千奇百怪的写法。Egg 按照约定进行开发，奉行『约定优于配置』，团队协作成本低。 基于以上和社区的评价，选择 egg 作为我们的后端框架，egg 本身也是支持插件化的开发，对于渐进式开发非常友好，这本身也是我们所需要的，H5可视化搭建本身也是一个需要渐进式迭代的过程。
总结
有了上面的基础知识，我们终于终于终于可以开始干活了！！！！先别急，先来给我们的项目取个好的名字吧！就叫他 coco(船长) 吧！ PS: 因为笔者比较喜欢打 dota 🙂