This issue recommends a set of excellent back-end front-end solutions——fes.js。

Fes.js is a good front-end application solution. Fs.js is based on Vue 3.0 and routing, and supports both configured routing and contractual routing, and extends the functionality accordingly. With a complete plug-in system covering compile-time and run-time life cycles, it supports a variety of functional extensions and business requirements.

Fes.js functional features

• Simple, based on Vue.js 3.0, easy to use. Implement the idea of “convention is better than configuration”, replace configuration with convention as much as possible in the design of plug-ins, and still provide a unified plug-in configuration entrance, simple and concise without loss of flexibility. Provide consistent API entry, consistent experience, easier to learn.
• Fast, Fes.js built-in routing, construction, plug-in management, providing testing, layout, permissions, internationalization, state management, request, data dictionary, Svg and other plug-ins, can meet most of the daily development needs.
• Robust, only need to care about the content of the page, reduce the chance of error! Provide unit testing, coverage testing capabilities to ensure project quality.
• Extensible, learn from UMI to achieve a complete life cycle and plug-in mechanism, plug-ins can manage the compile time and runtime of the project, capabilities can be packaged through plug-ins, coordinated and orderly operation in Fes.js.
• Facing the future, while meeting the needs, we will not stop exploring new technologies. Vue3.0 has been used to improve application performance, webpack5 has been used to improve build performance and implement microservices, and new technologies such as vite will be explored in the future.
• Community ecology, the main focus of FS.js is the developer experience, and we are constantly improving the framework. If you have questions or queries, the community of Fes.js is here to help you.

Fs.js architecture

get started quickly

1.Dependent environment

The first step is to have Node.js and make sure the node version is 10.13 or later

# print node versions node -vv10.13.0

yarn is recommended to manage npm dependencies

# Global installation yarnnpm i yarn -g

2.Create project

Step 1 Create a workspace

If the workspace does not exist, create it first:

# create directory workspacemkdir workspace# Enter directory workspacecd workspace

If the workspace already exists, go directly to it

# Enter directory workspacecd workspace

Step 2 Create a project in the workspace

Create with yarn

yarn create @fesjs/fes-app myapp

Or use NPM

npx @fesjs/create-fes-app myapp

If the project folder workspace/myapp already exists, it will prompt you that the directory already exists:

you can choose:

• Overwrite Deletes the project folder and recreates the project.
• Merge preserves the original project folder and overwrites the current directory file with a template file if the same file exists.

If you select Overwrite or Merge or if the workspace/myapp project directory does not exist, you will be prompted to select a template:

You can choose either the default PC type for mid-background front-end applications or the H5 type for mobile.

Step 3 Install dependencies

Installing using yarn

#Enter project directory cd myapp# Installation dependency yarn 

Or use NPM

# Enter project directory cd myapp# Installation dependency npm i 

3.Start-up project

Start with yarn

#Development and debugging yarn devyarn run v1.22.4$ fes devStarting the development server http://localhost:8080 ...✔ Webpack  Compiled successfully in 15.91s DONE  Compiled successfully in 15917ms                               11:17:08 AM

Or use NPM

# Development and debugging npm run dev> fes devStarting the development server http://localhost:8080 ...✔ Webpack  Compiled successfully in 3.66s DONE  Compiled successfully in 3662ms                                11:17:46 AM

Fs.js will start a hot-reload development server at http://localhost:8080. When you modify your.vue file, the content in your browser will also be updated automatically.

4.Deployment release

Build with yarn

# structure yarn buildyarn run v1.22.4$ fes build✔ Webpack  Compiled successfully in 45.37s✨  Done in 48.87s.

cstructure

# structure npm run build> fes build✔ Webpack  Compiled successfully in 45.37s

The build product is generated by default under./dist and then viewed through the tree command

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

5.Local verification

Before publishing, you can do local validation with serve, and the results should be the same as when executing fes dev.

6.deploy

Once local verification is complete, you are ready to deploy. You need to deploy the dist directory to the server.

Fes.js plug-in

You can read more on your own.