Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.

thinking

What is the micro front end design philosophy? What problem was solved?

The essence of the micro front end is the same as the concept of the back-end micro services, and the micro front end solution generally contains the following characteristics

  • On the basis of ensuring the operating experience of a system, the independent development and release of each micro-application is realized
  • Unified management of different sub-applications
  • Provides the ability to communicate with each other and switch between applications

Icestark main application initialization

Initialize the main Vue application

npm init ice icestark-layout @vue-materials/icestark-layout-app
Copy the code

Initialize the React main application

npm init ice icestark-layout @icedesign/stark-layout-scaffold
Copy the code

The local instance initializes the Vue master application, which runs as follows

CD icestark-layout NPM install # notice Vue main application run 'dev' NPM run dev # React main application run 'start' NPM run startCopy the code

Local address: http://localhost:3000

The official main application Demo has integrated the official Vue and React sub-applications. Then, create sub-applications locally, run them, and attach them to the local main application

Create the icestark child application

Vue child application

npm init ice icestark-child-vue @vue-materials/icestark-child-app
Copy the code
Run the Vue subapplication
cd icestark-child-vue
npm i
npm run dev
Copy the code

Local address: http://localhost:3001

The React child application

npm init ice icestark-child @icedesign/stark-child-scaffold
Copy the code
Run the React child application
cd icestark-child
npm i
npm run start
Copy the code

Local address: http://localhost:3333

Native application integration

In app. vue, modify the ICE registration configuration in onMounted. Modify the name, activePath, title, and Entry attributes

Note activePath to child application routing address, entry address here use child application starts the root of the routing address, also can point to the corresponding application specified address, such as http://localhost:3333/react

Configure the sidebar for the main application, pointing to the corresponding child application

Configure el-sub-menu in the basicLayout. vue file of the main application

Configure routes for subapplications

Configure the activePath of subapplication routes corresponding to the active application to implement normal loading

The React sub-application route is configured with a/React route address

Vue subapplication route. Configure a/Vue route address

Refresh the main app and the sidebar can now switch properly

At this time, the content of the sidebar of the main application corresponds to the locally started sub-application, and the integration is successful if it can be accessed. At this time, the local example has realized the application integration, application access, and route configuration jump capabilities of ICestARK framework.

Next, the local example implements route switching between sub-applications (page hopping) and application communication with each other.