查看原文
其他

【开源】Fes.js for Vue3,简洁却不简单

微众开源 前端早读课 2021-04-20

前言

本期开源由微众@康悦Rita投稿分享。

正文从这开始~~

Fes.js 是一套微众开源的优秀的中后台前端解决方案。提供初始项目,开发调试,模拟接口,编译打包的命令行工具。内置布局,权限,数据字典,状态管理,存储,API 等多个模块。以约定,配置化,组件化的设计思想,让用户只需关心使用组件构造页面内容。基于 Vue.js,上手简单。经过多个项目中打磨,趋于稳定。

我们需要开发的大部分前端应用的业务比较类似,比如中后台应用大多都是工作台、增删改查、权限、图表等。所以在开发一个前端应用之前,除了环境准备工作,还需要处理这些基础的业务逻辑。

如果没有统一的规范或者框架,技术选型也要看开发人员的喜好,每个项目的准备工作都手动处理一遍,非常耗费时间。久而久之,当团队会出现多种技术栈,历史项目将越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程,在问题发生前将其解决。

Fes.js 2.0做了哪些改进

对于 1.0 本只支持 PC 应用、扩展性不充分等不足,我们在 2.0 版本重新设计了以插件机制为基础的可扩展架构。

重写了 90% 代码,Fes.js 2.0 以 Vue 3.0 和路由为基础,同时支持配置式路由和约定式路由,并以此进行功能扩展。匹配了覆盖编译时和运行时生命周期完善的插件体系,支持各种功能扩展和业务需求。

Fes.js 架构

Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。

支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。

Fes.js 2.0 能够怎么更好的帮你

对于常规管理台业务场景,核心功能就是“增删改查、布局导航、路由权限”等。这些功能千篇一律却又必不可少,我们总在做简单又重复的工作,也一直在寻找更 smart 的解决方法。

我们使用现有的各项工具,解决了一部分问题。譬如使用 Vue CLI,它可以解决我们开发、打包、构建的问题。但是我们还是要和布局、导航、路由、权限死磕。现在,fes.js 应需求而生,除了提供极致的“开发-部署全流程”解决方案,还可以轻松快速的解决你面临的问题。使用fes.js,配置 layout,脱离代码即可解决布局、菜单 、导航等问题;配置 roles,分割权限列表,结合 access api 实现站点复杂权限管理;增强版的 request,内置请求防重、请求节流、错误处理等功能,让你的增删改查易如反掌,效率提升50%。fes.js 的功能远不止于此,来探索它吧!你会发现它值得。

  • 内置了路由、开发、构建等,并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件,可以满足大部分日常开发需求。

  • 基于 Vue.js 3.0,上手简单。贯彻“约定优于配置”思想,设计插件上尽可能用约定替代配置,同时提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的 API 入口,一致化的体验,学习起来更轻松。

  • 只需要关心页面内容,减少写 BUG 的机会!提供单元测试、覆盖测试能力保障项目质量。

  • 借鉴 Umi 实现了完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。

  • 满足需求的同时,我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能,已使用 webpack 5 提升构建性能和实现微服务,未来会探索vite等新技术。

我们的主要重点是开发人员体验。我们喜欢 Fes.js,并且会不断改进框架,所以您也喜欢它!期待有吸引力的解决方案,描述性的错误消息,强大的默认值和详细的文档。如果有问题或疑问,我们有用的社区将为您提供帮助。

快速上手

基础配置:要有 10.13 或以上版本的 Node.js, 管理 npm 依赖推荐使用 yarn。

使用 yarn:

  1. # 创建模板

  2. yarn create @fesjs/fes-app myapp


  3. # 安装依赖

  4. yarn


  5. # 运行

  6. yarn dev

使用 npm:

  1. # 创建模板

  2. npx @fesjs/create-fes-app myapp


  3. # 安装依赖

  4. npm install


  5. # 运行

  6. npm run dev


https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_1794722273761755140

写在最后

使用过程中,如果遇到困难,可到文档下查看解决方案;同时社区鼓励所有同学通过 Github issue 提交反馈,第一时间提交 issue。Fes.js 正在迅速发展中, 期待大家来一起玩耍!

Github Issue:https://github.com/WeBankFinTech/fes.js/issues

Github repo:https://github.com/WeBankFinTech/fes.js/tree/vue3

使用文档:https://winixt.gitee.io/fesjs/zh/

共建指南:https://winixt.gitee.io/fesjs/zh/guide/contributing.html

其他开源产品


【第2212期】滴滴开源 LogicFlow:专注流程可视化的前端框架


【第2166期】满帮动态化Flutter框架 — Thresh开源啦~~


欢迎自荐投稿,前端早读课等你来

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存