title: 'Rainbow.js - 基于Vue 3的现代化大型Web应用解决方案' home: true fullscreen: true meta:

• name: description content: Vue 3高级组件库，表单、聚光灯、多视图列表、富文本编辑器、页面搭建、低代码、前端架构

Rainbow.js

基于Vue 3的现代化大型Web应用解决方案，旨在解决要求多人开发，长期维护的大型Web应用的整体架构设计以及相关工具与研发流程的问题

Rainbow Pro是一个基于Vue 3和Naive UI的高级企业级前端组件库。典型应用场景包括云控制台应用，运营使用的内部管理平台等等。

通过抽象企业级应用的典型场景，依托于Vue 3的最新的Composition API、TypeScript及行业内领先的交互设计思想，Rainbow Pro提供了表单、聚光灯、多视图列表等开箱即用的高级组件，帮助你更高效的完成此类场景的开发，更为重要的是，提升代码的可维护性和质量，避免代码屎山的产生。

如果你碰到过以下场景，也许Rainbow Pro就是你想要的东东：

• 表单逻辑复杂，大量的状态需要手动管理和计算，动不动一个表单Vue文件就写了几千行，后面人接手完全改不动
• 系统内页面有上百个，用户迫切需要一个搜索入口快速查找想要的页面/文档
• 列表字段和过滤项超级多，一刷新就得重新选，费时费力，用户上手成本高，产品运营希望提供预定义的数据视图来减少用户使用的成本

| 组件 | 功能 | 完成度 | | :--------------: | :--------------------------------------: | :----: | | RainbowForm | 一站式表单解决方案 | ☑️ | | RainbowSpotlight | 类似于Mac系统Spotlight样式的全局搜索框 | ☑️ | | RainbowListView | 支持多视图展示的高度可配置的数据查询列表 | ☑️ |

Rainbow Builder是基于Web的所见即所得多功能编辑器，允许非技术人员编写格式复杂的文本以及搭建营销活动页面。支持多人协同编辑，架构设计上高度可扩展。

Rainbow Architecture提供了一套经过验证的大型Web应用架构设计规范、工具和流程，确保此类型项目能够在多人协同开发的时候高效率的迭代并尽可能少得产生技术债务。

最低要求

Vue.js: 3.2.30+，Vue-Router 4+

浏览器：Chrome 70+, Edge 79+, Safari 12+, QQ浏览器 10+, 360浏览器 12+

Naive UI：2.26.0+

立刻开始

安装

npm install @ferainbow/ui --save

配置RainbowPlugin

import { RainbowPlugin } from '@ferainbow/ui';
import '@ferainbow/ui/dist/style.css';

const app = <create a Vue 3 app object>

app.use(RainbowPlugin);

恭喜你🎉！所有准备工作都已经完成了！！

下一步，访问文档站点获取组件使用文档

参与贡献

欢迎大家参与讨论新功能和Bug修复，不要犹豫，直接在开一个新issue即可

关注我

我会不时的在我的微信公众号和个人网站上面发布文章和新的项目，欢迎关注！