Fes.js ：一个基于 Vue 3 好用的前端应用解决方案，开源且免费！
在前端开发的世界中，如何快速且高效地构建应用程序，常常成为开发者的核心挑战。构建一个完整的前端项目，需要从零开始搭建开发环境、封装 API 请求、配置路由、处理权限管理等，这无疑是一项繁琐的任务。💼 你是否也面临过在不同项目中不断重复这些操作？ Fes.js，一个基于 Vue 3 的前端应用解决方案，将助你告别这些烦恼！
今天，我要向大家推荐 Fes.js —— 它提供了一整套从开发到部署的前端应用开发流程，让开发者只需专注于组件的构建和业务逻辑，其他繁琐的配置和约定将由框架自动完成。让我们一起来深入了解一下这个优秀的项目吧！🚀
（开发文档截图）
什么是 Fes.js？
Fes.js 是一个基于 Vue 3 构建的前端应用解决方案，它结合了现代前端开发的最佳实践，旨在简化开发流程并提高生产力。Fes.js 通过约定优于配置的设计理念，让开发者能专注于业务逻辑和页面搭建，而不必为复杂的配置烦恼。
Fes.js 针对中后台应用场景，内置了丰富的功能插件，如权限管理、国际化、状态管理、API 请求等，几乎满足了所有开发场景的需求。它的插件化机制，让项目具有高度的扩展性，同时保持了框架的简洁与稳定性。
Fes.js 的核心特点
1. 🚀 快速开发：内置丰富插件
Fes.js 内置了从开发、测试到部署的一整套插件体系，包括路由管理、布局、权限控制、国际化、API 请求封装等，几乎涵盖了中后台项目的所有开发需求。它将大多数项目中繁琐的设置和配置内置为插件，开发者无需重复编写相同的代码或逻辑。
-
• 权限管理：通过
@fesjs/plugin-access插件，提供了页面资源的权限控制能力。 -
• API 请求封装：
@fesjs/plugin-request插件基于 Axios，内置了防止重复请求、请求节流、错误处理等功能，开发者可以轻松完成复杂的 HTTP 请求逻辑。
亮点：无论你是开发新项目还是维护老项目，Fes.js 提供了高度灵活的插件化架构，可以根据业务需求随时扩展或精简功能。
2. 🧨 简单上手：约定优于配置
Fes.js 强调“约定优于配置”，在框架设计中尽可能减少配置项，让开发者能够快速上手并投入开发工作。通过合理的默认约定，Fes.js 提供了一致的 API 和开发体验，大大降低了学习曲线。
-
• 一致的插件配置入口：所有插件的配置都集成在一个统一的配置文件中，开发者不再需要在各个配置文件中来回切换。
-
• 灵活的路由管理：支持配置式路由和约定式路由两种模式，开发者可以根据项目需求自由选择。
3. 💪 健壮稳定：单元测试与代码覆盖
项目的质量是开发中的关键，Fes.js 不仅关注功能的实现，还提供了完善的测试支持。通过 @fesjs/plugin-jest 插件，Fes.js 提供了基于 Jest 的单元测试和代码覆盖功能，让开发者在开发过程中能够轻松确保代码的质量。
测试覆盖：无论是功能测试还是单元测试，Fes.js 的插件支持确保了项目的健壮性，减少了潜在的 BUG 风险。
4. 📦 高度扩展：插件化机制
Fes.js 借鉴了 Umi.js 的插件化机制，允许开发者在编译时和运行时添加自定义插件。无论是布局、权限管理、状态管理，还是国际化功能，都可以通过插件进行扩展。开发者可以根据业务需求，自行开发或引入已有的插件，极大提升了项目的灵活性与可扩展性。
插件例子：
• @fesjs/plugin-vuex：基于 Vuex 提供状态管理能力。
• @fesjs/plugin-locale：基于 Vue I18n 提供国际化能力。
• @fesjs/plugin-layout：简单配置即可拥有导航栏、侧边栏的布局结构。
5. 📡 面向未来：拥抱 Vue3 和 Webpack5
Fes.js 立足于 Vue 3 和 Webpack 5，不仅充分利用了 Vue 3 的性能提升，还通过 Webpack 5 和 Vite 提升了编译和构建速度。框架设计上已支持微服务架构，能轻松应对未来的业务需求和项目扩展。
亮点：在项目开发中，开发者可以通过 Vite 实现更快的热更新和编译速度，特别适合大型前端项目的开发需求。
详细功能插件介绍
Fes.js 通过插件化机制，为开发者提供了丰富的功能。以下是一些常用插件的详细介绍：
| 插件名称 | 功能介绍 |
@fesjs/plugin-access |
提供页面资源的权限控制，帮助开发者轻松管理用户权限。 |
@fesjs/plugin-request |
基于 Axios 封装的 HTTP 请求库，提供请求节流、错误处理、防止重复请求等功能。 |
@fesjs/plugin-layout |
通过简单的配置实现项目的布局，包含导航栏、侧边栏等常见中后台应用的布局元素。 |
@fesjs/plugin-locale |
基于 Vue I18n 的国际化插件，方便开发多语言应用。 |
@fesjs/plugin-vuex |
提供 Vuex 状态管理能力，让数据流管理更清晰、易维护。 |
@fesjs/plugin-swc |
在 Webpack 构建中使用 swc-loader，大幅提升构建速度。 |
@fesjs/plugin-windicss |
提供原子化的 CSS 能力，基于 WindiCSS，让开发者无需再为样式撰写复杂的 CSS 代码。 |
@fesjs/plugin-monaco-editor |
提供在线代码编辑功能，基于 monaco-editor（VS Code 使用的代码编辑器），特别适合内置的开发者工具场景。 |
如何在项目中使用 Fes.js？
接下来，让我为大家演示如何在项目中快速集成和使用 Fes.js。
1. 快速开始
Fes.js 提供了非常简便的启动流程，你可以使用 pnpm 或 npm 快速创建并运行一个 Fes.js 项目。
使用 pnpm：
# 创建模板项目
pnpm create @fesjs/fes-app myapp
# 安装依赖
pnpm i
# 启动开发服务器
pnpm dev使用 npm：
# 创建模板项目
npx @fesjs/create-fes-app myapp
# 安装依赖
npm install
# 启动开发服务器
npm run dev2. 插件集成与配置
在 Fes.js 项目中，所有插件的配置都集中在 fes.config.js 文件中。例如，如果你想集成 Vuex 插件进行状态管理，只需在配置文件中引入相应插件：
module.exports = {
plugins: [
'@fesjs/plugin-vuex',
'@fesjs/plugin-request',
'@fesjs/plugin-layout',
// 更多插件...
],
};通过这种方式，你可以根据项目需求灵活添加或删除插件，而不需要修改大量的代码。
3. 权限管理的实现
假设你需要在项目中实现权限控制，可以通过 @fesjs/plugin-access 插件来管理。首先，在插件配置中启用权限控制插件，然后通过定义权限规则来控制不同用户的访问权限。
// 权限规则配置
export default function access() {
return {
canReadDashboard: true, // 控制用户是否可以访问 Dashboard 页面
};
}我对该项目的看法
从我的角度来看，Fes.js的最大优势在于它的极简性与扩展性。在如今繁忙的开发节奏下，开发者往往需要在功能与性能之间做出权衡，而 Fes.js 则通过丰富的插件体系为我们提供了更多的选择空间。你可以快速启动项目，也可以通过插件体系不断扩展功能。对于团队合作开发，Fes.js 还能统一开发规范，降低开发成本与维护成本。
最重要的是，Fes.js 背后的设计哲学——约定优于配置，让开发过程更加流畅且一致，大大降低了初学者的学习难度。这对于前端新手和经验丰富的开发者来说，都是一个值得深入挖掘的工具。
结语
总的来说，Fes.js 是一款非常适合中后台项目开发的前端框架。它提供了丰富的内置插件、灵活的路由管理和高效的开发体验。如果你正在寻找一款能帮助你简化项目开发、提高生产力的框架，Fes.js 绝对值得一试！
使用文档地址
https://fesjs.mumblefe.cn/仓库地址
https://gitee.com/WeBank/fes.js
