Fes.js Overview: Features, Architecture, and Quick‑Start Guide

Fes.js is a front‑end application solution built on Vue 3.0 and a routing system, supporting both configuration‑based and convention‑based routing, and offering an extensive plugin ecosystem that covers compile‑time and runtime lifecycle extensions.

Fes.js Feature Highlights

Simple : Based on Vue 3.0, it follows the "convention over configuration" principle, providing a unified plugin configuration entry while remaining flexible.

Fast : Bundles routing, building, and plugin management, offering plugins for testing, layout, permissions, i18n, state management, requests, data dictionaries, SVG, etc.

Robust : Focuses on page content, reducing errors, and includes unit and coverage testing to ensure project quality.

Extensible : Inspired by UMI, it implements a full lifecycle and plugin mechanism, allowing plugins to manage both compile‑time and runtime capabilities.

Future‑Oriented : Utilises Vue 3.0 for performance, Webpack 5 for build speed, and plans to explore Vite and other new technologies.

Community Ecosystem : Emphasises developer experience and provides community support for questions and issues.

Fes.js Architecture

The architecture diagram (image) illustrates the core modules, plugin system, and build pipeline that work together to deliver a cohesive development experience.

Quick Start Guide

1. Prerequisites

Ensure Node.js (v10.13 or higher) is installed:

# 打印 node 版本
node -v
v10.13.0

It is recommended to use yarn for package management:

# 全局安装 yarn
npm i yarn -g

2. Create a Project

Step 1 – Create Workspace

If the workspace does not exist:

# 创建目录 workspace
mkdir workspace
# 进入目录 workspace
cd workspace

If it already exists, simply enter it:

# 进入目录 workspace
cd workspace

Step 2 – Create the Project Inside the Workspace

Using Yarn:

yarn create @fesjs/fes-app myapp

Or using npm:

npx @fesjs/create-fes-app myapp

If the target folder already exists, you will be prompted to choose:

Overwrite – delete the existing folder and recreate the project.

Merge – keep the existing folder and overwrite conflicting files with the template.

After confirming the action, you will select a template (PC for admin applications or H5 for mobile).

3. Install Dependencies

With Yarn:

# 进入项目目录
cd myapp
# 安装依赖
yarn

Or with npm:

# 进入项目目录
cd myapp
# 安装依赖
npm i

4. Start Development Server

Using Yarn:

# 开发调试
yarn dev
# Output example
Starting the development server http://localhost:8080 ...
✔ Webpack
Compiled successfully in 15.91s
DONE Compiled successfully in 15917ms

Or using npm:

# 开发调试
npm run dev
# Output example
Starting the development server http://localhost:8080 ...
✔ Webpack
Compiled successfully in 3.66s
DONE Compiled successfully in 3662ms

The server provides hot‑reloading; changes to .vue files are reflected instantly in the browser.

5. Build for Production

With Yarn:

# 构建
yarn build
# Output example
✔ Webpack
Compiled successfully in 45.37s
✨ Done in 48.87s.

Or with npm:

# 构建
npm run build
# Output example
✔ Webpack
Compiled successfully in 45.37s

The build output is placed in the ./dist directory. Example file tree:

tree ./dist
dist
├── chunk-vendors.27cd4686.js
├── chunk-vendors.a5f5de67.css
├── index.11411d43.css
├── index.d72f1ba2.js
├── index.html
├── logo.png
└── static
    └── logo.0f85bba0.png

6. Local Verification

Before releasing, you can use serve to verify the production build locally; the result should match the output of fes dev .

7. Deployment

After verification, upload the dist folder to your server for deployment.

Fes.js Plugins

Fes.js offers a rich plugin ecosystem that can be extended to meet various business needs, such as testing, layout, permissions, internationalisation, state management, and more.

Open‑source repository: https://gitee.com/WeBank/fes.js