项目简介
凤栖前端框架（FlexUE Framework） 是一个面向交互模式设计和支持元数据的前端界面开发框架，是星河低代码平台的前端解决方案。
FlexUE 是一个完整意义上的企业级前端开发框架，它不属于常见的那类基于模板生成页面代码的模板工具。 FlexUE Framework 不仅关注控件元素的定义，而且关注交互模式的定义，最重要的是注重与后端架构的无缝集成，前端组件的交互状态内置了对领域模型、数据、服务、账户、授权等方面的支持与对接。
1. 功能特点
- 无缝集成星河低代码平台后端架构，屏蔽前后端之间的通讯、状态协调、格式转换等与业务无关的复杂技术细节。
- 前端组件的交互和状态内置集成了对后端的领域模型、数据、服务、账户、授权等方面的交互支持与响应。
- 支持由后端数据模型的元数据驱动，在运行时渲染数据界面。
- 具有灵活、全面的扩展性，支持以 HTML/js/css 原生语言编程自定义交互界面。
- 具有充分的开放性，内置集成 Vue 框架，并且支持引入诸如 Bootstrap 之类的第三方库，或者用户的私有库。
- 内置了丰富的开箱即用的组件，包括动态表单、表格、级联树、级联列表、数据引用、文件上传/下载、图片预览/缩略、数学公式等等。
- 灵活的组件化机制，支持组合多个内置组件形成新组件，支持继承内置组件进行扩展，支持自定义组件替换内置组件，支持注册自定义组件。
- 遵循约定优于配置、积木式组合扩展、渐进分层抽象的设计原则，对简单功能低代码配置化，对复杂功能可原生语言编程扩展。
- 学习门槛低，没有中间语言，界面开发简单，或以配置化界面生成、或由元数据自动生成、或者原生 HTML/js/css 编码，简单易上手。
- 运行效率高，以编译代码直接执行，不需要依赖中间语言解释器。
- 轻量、灵活和可扩展，既可以与星河低代码平台结合使用，也可以独立使用。
2. 设计理念
FlexUE Framework 凤栖前端开发框架（简称 FlexUE）是一个基于元数据的 Web 和移动端界面开发框架，提供了一种全面元数据化的声明式、模式化的UI开发模式，通过清晰地界定和分别处理“用户交互界面（UE）”开发中的“交互”与“样式呈现”这两类主要的任务，极大程度地实现 UE 开发的标准化、模式化和组件化，从而实现低代码化的高效率低成本开发模式。
FlexUE 框架基于高维抽象提供了标准化、模式化的“交互”实现来处理“少变”的部分任务，使开发者可以重点关注在“样式呈现”这部分“多变”的任务。特别是在复杂业务的情况下， 可显著地提升的 UI 界面的开发效率，提升对业务需求的响应速度。
FlexUE 框架不绑架开发者的技术选择，FlexUE 架构在当前主流的 Web 前端技术如 HTM5 、NodeJS、 Vue 等技术之上，有良好的架构开放性。
FlexUE 的核心思想认为，用户界面（UI）实现过程可以划分为对两个部分的实现：“交互逻辑”和“呈现样式”。其中，“交互逻辑”的部分是共性化的，是可以模式化和标准化的，而“呈现样式”部分是个性化的，在面对不同的目标、场景或时间时需要多样化的呈现。FlexUE 认为把用户界面设计中的 “共性部分”与“个性部分”进行分离和独立处理，能够进一步极大地提升 UI 实现的工程化和可复用能力。
FlexUE 的核心设计包括以下几点：
- 模式化抽象定义“交互逻辑”，建立一套表示 UI 交互逻辑的模式化语言。
- 建立从“交互模式”到“呈现样式”的映射机制，即建立通用化、标准化地将抽象的“交互模式”转为具体化的“呈现样式”的实现框架。
- 建立一套 FlexUE 的实现模板与组件库，建立模式化的 UI 快速开发能力。
在 FlexUE 中，采用“元数据（Metadata）”的方式来描述UI的“交互模式”。 FlexUE 对“元数据（Metadata）”的定义是：描述用户界面（UI）的交互逻辑的数据。 元数据描述了 UI 中与具体呈现样式无关的部分”，用于表示那些不会跟随样式变化的交互逻辑。因而，元数据也是无状态，可以非常方便地在后端、前端之间共享，在不同的应用之间共享。因此，这也是建立可大规模共享复用的开发生态的基础。
以常见的登录功能为例，解释一下什么是“与呈现样式无关的 UI 交互逻辑——模式化交互”：
如上图是两个来自不同应用的登录界面（组件），一方面，我们可以把它们的“交互行为”定义为一致的叙述——可提供两种登录凭据的输入方式：（1）以字段输入方式提供“用户名”和“密码”。（2）以“扫码”方式提供登录凭据。另一方面，我们可以把它们的“呈现样式”进行差异化的叙述——（1）以书角翻页动态特效的异型按钮方式切换至“扫码”输入。（2）以标准按钮点击方式切换至“扫码”输入。
当我们对登录操作采用一致的“交互行为”定义时，其对应的后端登录服务的实现在功能上也是完全一致的。后端服务只依赖于定义的“交互行为”，而不依赖于“呈现样式”。基于此观察，我们能够以“交互行为”定义为中心实现前后端功能一体的组件化复用，而“呈现样式”作为独立的任务被分离在更小的开发协作单元范围内。
“交互逻辑”和“呈现样式”的分离，一方面是通过抽象出一组通用的“交互逻辑”的形式化定义，并以结构化的“元数据”对“交互逻辑”进行描述，另一方面是基于现代 Web 前端技术对“呈现样式”进行设计实现，利用Web模板、层叠样式表等技术，实现用户界面设计实现的层次化 —— 具有默认的约定俗成的模式化呈现，同时可以局部调整具体样式，也可以深度地实现新的呈现样式。通过这样的分离，开发者基于 FlexUE 默认的组件模板下只需要定义好“元数据”——UI交互逻辑，便可以快速灵活地完成UI的开发；同时，这种分离也有利于前端界面开发与后端系统开发的衔接和集成，实现全栈的深度工程化和组件化。
3. 安装下载
最简便的获取方式是通过 npm 源获取。
设置我们开发者中心提供的 npm 源 https://npm.linkgie.com/repository/npm-group/可及时获得最新版本。
从 npm 官方源（https://registry.npmjs.org）（或其它镜像）能够获得正式发布的版本。
截止文档更新时(2024-02-22)，flexue 的最新版本为
1.52.10。
TIP
注：flexue 在 npm 官方源（https://registry.npmjs.org）的只包含里程碑稳定版本，如需最新的版本，可将库的地址设置为我们提供的 npm 源 https://npm.linkgie.com/repository/npm-group/。
- 设置 npm 源的方法 (这是可选步骤) ：
npm config set registry https://npm.linkgie.com/repository/npm-group/
- 执行安装命令：
# 在项目根目录 quick-starter 下执行命令；
npm install --save flexue
安装成功后，在项目根目录的 package.json 文件中可以看到已经加入 flexue 的依赖。