在开发一个前端项目之前，我们可能需要做以下准备工作：搭建开发环境约定代码规范封装API请求配置路由实现布局、菜单、导航实现登录权限管理...除了准备工作，你还会遇到很多类似的业务类型。比如中后台应用，大部分都是工作台，增删改查，权限，图表等，如果每个项目完全手工处理，不仅耗时，而且时间久了，可能会有多个技术栈和开发规范，导致开发流程不一致，使得历史项目越来越难以维护。所以我们需要一个完整的解决方案来管理从开发到部署的整个过程。Fee.js简介Fee.js是WeBankFinTech在Github/Gitee上开源的前端应用方案，当前版本为0.4.5。Fee.js基于Vue3.0和路由，同时支持配置路由和约定路由，并以此来扩展功能。配备了完整的涵盖编译时和运行时生命周期的插件体系，支持各种功能扩展和业务需求。约定化、配置化、组件化的设计思路，让用户只关心用组件构建页面内容。基于Vue.js，上手简单。经过多个项目的打磨，趋于稳定。Fee.js使用Fes.js是一个易于使用的前端应用程序解决方案。Fes.js基于Vue3.0和路由，同时支持配置路由和约定路由，并以此来扩展功能。配备了完整的涵盖编译时和运行时生命周期的插件体系，支持各种功能扩展和业务需求。Fee.js主要有以下特点：快速、内置路由、开发、构建等，并提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件.,可以满足大部分的日常开发需求。简单，基于Vue.js3.0，简单易用。贯彻“约定优于配置”的思想，尽可能设计插件，以约定代替配置，提供统一的插件配置入口，简单、简洁、灵活。提供一致的API入口，一致的体验，更容易学习。健壮，你只需要关心页面的内容，减少写BUG的机会！提供单元测试和覆盖测试能力，保证项目质量。具有可扩展性，使用Umi实现了完整的生命周期和插件机制。插件可以管理项目的编译时和运行时，能力可以通过插件进行封装，在Fes.js中协调有序的运行。面向未来，在满足需求的同时，我们不会停止对新技术的探索。已经使用Vue3.0提升应用性能，使用webpack5提升构建性能和实现微服务，未来还会探索vite等新技术。Fes.js将常用的技术栈封装成插件，进行梳理汇聚，让大家仅用Fes.js就可以完成80%的日常工作。Fee.jsFes.js支持插件和插件集。通过插件集，插件汇聚依赖，进而支持不同的业务类型。Fee.jsFee.js依赖Node.js10.13+，推荐使用yarn进行依赖管理。首先创建一个工作空间：#createdirectoryworkspacemkdirworkspace#进入目录workspacecdworkspace然后在工作空间中创建一个项目：#createtemplateyarncreate@fesjs/fes-appmyapp项目结构创建完成后，安装依赖：#进入项目目录cdmyapp#安装依赖yarn安装完成后，启动项目：#开发调试yarndevyarnrunv1.22.4$fesdevStartingthedevelopmentserverhttp://localhost:8080...?WebpackCompiledsuccessfullyin15.91sDONECompiledsuccessfullyin15917ms启动完成后，访问http://localhost:8080，我们可以查看Fee.js接口基础：如果需要部署发布Fee.js，可以构建，然后使用dist/目录发布：#buildyarnbuildyarnrunv1.22.4$fesbuild?WebpackCompiledsuccessfullyin45.37s?Donein48.87s.fee.js项目目录结构如下：fes-template├──package.json├──tsconfig.json├──mock.js├──.fes.js├──.env├──dist├───公众│└──行业ex.html└──src├──.fes└──pages│└──index.vue└──app.js其中src包含核心逻辑代码，.fes存放临时文件，pages目录存放路由文件，app.js是运行时配置文件。Fes.js约定。fes.js文件是项目的基础配置文件。一个常见的配置示例如下：exportdefault{base:'/foo/',publicPath:'/',devServer:{port:8080}mock:{prefix:'/v2'},proxy:{'/v2':{'target':'https://api.douban.com/','changeOrigin':true,},},layout:{title:"Fes.js",footer:'CreatedbyMumbelFe',multiTabs:false,menus:[{name:'index'},{name:'onepiece'},{name:'store'},{name:'simpleList'}]}在配置文件中，我们定义了包括：服务路径，代理，Mock服务、菜单等。Fee.js基于VueRouter实现其路由，可以通过router在配置文件.fee.js中配置：exportdefault{router:{routes:[],mode:'hash'}}fee.js是通过添加一个插件的方式来为项目添加额外的功能，包括：项目的webpack配置。修改项目的babel配置。添加了新的fes命令-例如@fes/plugin-jest添加了fes测试命令，允许开发人员运行单元测试。一个集成Vue的插件。修改路由配置。提供运行时API...插件的入口点是一个函数，它以一个API对象作为第一个参数：exportdefault(api)=>{api.describe({key:'esbuild',config:{schema(joi){returnjoi.object();},default:{}},enableBy:api.EnableBy.config,});}总结Fee.js是一款优秀的开源前端应用解决方案，基于Vue3.0和路由，其它快速、简单、健壮、可扩展且面向未来。与其他前端框架相比，Fee.js内置各种基础组件，开发效率高，简单易用，统一配置，简单灵活；插件的使用使开发过程具有高度可扩展性。
