点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
哈喽，大家好，我是
xy👨🏻💻。今天给大家分享一个基于 Vue3 的企业级前端应用解决方案——Fes.js！
前言
在前端开发的世界里，Vue.js 以其轻量级、易上手的特点，赢得了广大开发者的青睐。
而随着 Vue3 的发布，我们更是迎来了一个性能更强、更易于维护的版本。
但你是否还在使用 create-vue 来初始化你的 Vue 项目？
今天，我要向你推荐一个更现代、更强大的选择——Fes.js！
Fes.js：Vue 3 的企业级前端解决方案
Fes.js 是一个基于 Vue3 的前端应用解决方案，它不仅提供了初始化项目的 CLI 工具，还内置了布局、权限、数据字典、状态管理等多个模块。
更重要的是，Fes.js 采用了约定、配置化、组件化的设计思想，让你只需关注于用组件搭建页面内容，其余的繁琐配置都交给它来处理。
为什么选择 Fes.js？
1. 极速开发体验（Fast）
Fes.js 提供了极致敏捷的开发体验。从创建项目到开发调试，再到编译打包，Fes.js 一应俱全。它让开发流程变得前所未有的流畅，大幅提升了开发效率。
2. 低学习成本（Easy）
基于 Vue.js 3.0，Fes.js 的上手非常简单。它贯彻了“约定优于配置”的思想，通过统一的插件配置入口，提供了简单简洁又不失灵活的开发体验。一致性的 API 入口，让学习成本大大降低。
3. 稳健的性能（Strong）
Fes.js 通过提供单元测试、覆盖测试能力，保障了项目的质量。你只需要关心页面内容，Fes.js 会帮你处理好代码的稳健性和性能优化。
4. 强大的插件生态
Fes.js 的真正强大之处在于其插件生态。这个生态系统提供了一系列的插件来满足各种开发需求，覆盖了从项目构建、开发调试到运行时功能等多个方面。
如何开始使用 Fes.js？
使用 Fes.js 的步骤非常简单，以下是基本的初始化步骤：
1. 使用 Fes.js CLI 工具创建模板（以 npm 为例）:
npx @fesjs/create-fes-app myvue
2. 提示选择需要的模板 （以 PC 为例）:
3. 进入项目文件夹安装依赖启动项目：
# 进入项目文件夹
cd myvue
# 安装依赖
npm install
# 启动
npm run dev
4. 使用 Vite 作为构建工具：
Fes.js@3.0.x 版本支持 Vite 和 Webpack 两种构建方式，不再内置构建方式，需要开发者自行选择:
选用 Vite 构建，安装 npm i @fesjs/builder-vite 依赖即可。 选用 Webpack 构建，安装 npm i @fesjs/builder-webpack 依赖即可。
npm i @fesjs/builder-vite
重新启动：
如何使用插件
Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
以下是一些核心插件及其功能：
路由插件：基于 Vue Router，自动生成路由配置，简化了路由管理流程。 状态管理插件：提供了基于 Vuex 或 Pina 的状态管理能力，适合管理复杂的全局状态。 API 请求插件：封装了 Axios，提供了防止重复请求、请求节流、错误处理等功能，简化了与后端 API 的交互。 布局插件：提供了简单的配置来实现布局，包括导航以及侧边栏等。 国际化插件：基于 Vue I18n，提供了国际化能力，方便开发多语言应用。 数据字典插件：提供了统一的枚举存取及丰富的函数来处理枚举，简化了数据管理。 权限控制插件：提供对页面资源的权限控制能力。 SVG 图标插件：SVG 文件自动注册为组件，方便在项目中使用 SVG 图标。 单元测试插件：基于 Jest，提供单元测试、覆盖测试能力。 模型插件：提供了简易的数据管理方案。 微服务插件：基于 qiankun，提供了微服务能力。 样式处理插件：支持 Sass 样式，增强了 CSS 的功能。 代码编辑器插件：提供了基于 Monaco Editor 的代码编辑器能力。 原子化 CSS 插件：基于 Windi CSS，提供原子化 CSS 能力。 Pinia 状态管理插件：提供了基于 Pinia 的状态管理能力。 水印插件：提供在页面上添加水印的功能。 SWC 插件：在 webpack 构建中使用 swc-loader，提升构建速度。
这些插件大多数都是可选的，并且可以按需引入，这样可以避免引入不必要的依赖，保持项目的轻量级。Fes.js 的插件生态不仅提高了开发效率，还保证了项目的可维护性和扩展性。
以布局插件 @fesjs/plugin-layout 为例：
配置参数是 navigation, 布局有五种类型 side、mixin 、top 、left-right、top-left-right， 默认是 side。
Fes.js 以其现代化的架构、强大的功能和活跃的社区支持，成为了 Vue 开发者的新宠。
如果你还在使用 create-vue，不妨试试 Fes.js，它可能会成为你构建下一个项目的最佳选择！
相关链接：
Fes.js GitHub: https://github.com/WeBankFinTech/fes.js Fes.js 文档: https://webankfintech.github.io/fes.js/
开始你的 Fes.js 之旅，让我们一起在 Vue 的世界里，创造更多可能！🚀
写在最后
公众号：前端开发爱好者专注分享web前端相关技术文章、视频教程资源、热点资讯等，如果喜欢我的分享，给 🐟🐟 点一个赞👍 或者 ➕关注都是对我最大的支持。
欢迎长按图片加好友，我会第一时间和你分享前端行业趋势，面试资源，学习途径等等。
添加好友备注【进阶学习】拉你进技术交流群
关注公众号后，在首页：
回复 面试题，获取最新大厂面试资料。 回复 简历，获取 3200 套 简历模板。 回复 React 实战，获取 React 最新实战教程。 回复 Vue 实战，获取 Vue 最新实战教程。 回复 ts，获取 TypeScript 精讲课程。 回复 vite，获取 Vite 精讲课程。 回复 uniapp，获取 uniapp 精讲课程。 回复 js 书籍，获取 js 进阶 必看书籍。 回复 Node，获取 Nodejs+koa2 实战教程。 回复 数据结构算法，获取数据结构算法教程。 回复 架构师，获取 架构师学习资源教程。 更多教程资源应有尽有，欢迎 关注获取。
