Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to use Fes.js". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Before developing a front-end project, we may need to do the following preparations:

Build a development environment

Convention code specification

Encapsulate an API request

Configure routin

Implement layout, menu, navigation

Implement login

Authority management

...

In addition to the preparatory work, we will also encounter many similar business types, such as workbench, add, delete, change and query, permissions, charts and so on. If each project is processed completely manually, it will not only take time, but also may have a variety of technology stacks and development specifications over time, resulting in disunity of the development process, and historical projects will become more and more difficult to maintain. So we need a complete solution to manage the entire process from development to deployment.

Fee.js

Fee.js is an open source front-end application solution for WeBankFinTech on Github / Gitee. The current version is 0.4.5.

Fee.js is based on Vue 3.0 and routing, and supports both configured and contracted routing to extend its functionality. It is equipped with a plug-in system that covers the compile-time and runtime life cycle, and supports a variety of functional extensions and business requirements. With the design idea of convention, configuration and component, users only care about building page content with components. Based on Vue.js, easy to use. After polishing in many projects, it tends to be stable.

Fee.js

Using Fes.js is a useful front-end application solution. Fes.js is based on Vue 3.0 and routing, and supports both configured and contracted routing to extend its functionality. It is equipped with a plug-in system that covers the compile-time and runtime life cycle, and supports a variety of functional extensions and business requirements.

Fee.js has the following main characteristics:

Fast, built-in routing, development, build, and provide testing, layout, permissions, internationalization, state management, API requests, data dictionaries, SvgIcon and other plug-ins, can meet most of the daily development needs.

Simple, based on Vue.js 3.0, easy to use. Implement the idea of "convention is better than configuration", design plug-ins to replace configuration with conventions as far as possible, and provide a unified plug-in configuration entrance, simple and flexible. Provide consistent API entry, consistent experience, easier to learn.

Robust, only need to care about the content of the page, reduce the opportunity to write BUG! Provide unit testing and 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 run time of the project, capabilities can be encapsulated by plug-ins, coordinated and orderly operation in Fes.js.

Facing the future, while meeting the demand, 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 micro-services, and new technologies such as vite will be explored in the future.

Fes.js encapsulates the commonly used technology stack into plug-ins and converges together, so that people can complete 80% of their daily work with only Fes.js.

Fee.js

Fes.js supports plug-ins and plug-in sets, which converge dependencies through plug-in sets and then support different business types.

Fee.js

Fee.js relies on Node.js 10.13 managers, and yarn is recommended for dependency management. First, create a workspace:

# create a directory workspace mkdir workspace # enter the directory workspace cd workspace and create a project in the workspace:

# create template yarn create @ fesjs/fes-app myapp after the project structure is created, the installation depends on:

# enter the project directory cd myapp # after the installation of dependent yarn is complete, start the project:

# Development and debugging yarn dev yarn run v1.22.4$ fes dev Starting the development server http://localhost:8080... ✔ Webpack Compiled successfully in 15.91s DONE Compiled successfully in 15917ms is started, visit http://localhost:8080, and we can see the basic interface of Fee.js:

Fee.js

If you need to deploy the release, you can build it and then publish it using the dist/ directory:

# the project directory structure of building yarn build yarn run v1.22.4$ fes build ✔ Webpack Compiled successfully in 45.37s ✨ Done in 48.87s.Fee.js is as follows:

Fes-template ├── package.json ├── tsconfig.json ├── mock.js ├── .fes.js ├── .env ├── dist ├── public │ └── index.html └── src ├── .fes └── pages │ └── index.vue └── app.js where src contains core logic code, .fes stores temporary files, pages directory stores routing files, and app.js is the runtime configuration file.

Fes.js agrees that the .fes.js file is the basic configuration file for the project. A common example of configuration is as follows:

Export default {base:'/ foo/', publicPath:'/', devServer: {port: 8080} mock: {prefix:'/ v2'}, proxy: {'/ v2employees: {'target':' https://api.douban.com/', 'changeOrigin': true,},} Layout: {title: "Fes.js", footer: 'Created by MumbelFe', multiTabs: false, menus: [{name:' index'}, {name: 'onepiece'}, {name:' store'} {name: 'simpleList'}]}} in the configuration file Our definition includes: service path, proxy, Mock service, menu and so on.

Fee.js implements its routing based on Vue Router and can be configured through router in the configuration file .fee.js:

Export default {router: {routes: [], mode: 'hash'}} Fee.js adds additional features to the project by adding plug-ins, including:

Webpack configuration of the project.

Modify the babel configuration of the project.

Add new fes commands-for example, @ fes/plugin-jest adds a fes test command that allows developers to run unit tests.

Plug-ins that integrate Vue.

Modify the routing configuration.

Provide runtime API

...

The entry to the plug-in is a function that takes the API object as the first argument:

Export default (api) = > {api.describe ({key: 'esbuild', config: {schema (joi) {return joi.object ();}, default: {}}, enableBy: api.EnableBy.config,}) } this is the end of "how to use Fes.js". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.