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

This article will explain in detail how to create micro-applications based on React and Vue. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have some understanding of the relevant knowledge after reading this article.

(1) create micro-applications based on React

1. Create React micro-application

Create an application: create-single-spa, pay attention to the name of the organization and project. You will need to register the micro application later:

1. Application directory input todos

two。 Frame selection react

Modify the application port & start the application

Launch the application: npm start

2. Register the application

Register the entry file of the React project into the pedestal application (container application)

\ container\ src\ study-root-config.js:

Specify the reference address of the micro-front-end application module:

(the corresponding application server can be accessed directly, and URL is prompted to load the address)

Specify the access address of the common library. By default, react and react-dom in the application are not packaged by webpack. Single-spa believes that it is a common library and should not be packaged separately.

Modify the default application code to display the application content on a separate page

Container\ src\ study-root-config.js

3. Specify the location where rendering is applied

Micro\ container\ src\ index.ejs

Micro\ todos\ src\ study-todos.js

4. React application code parsing

Micro\ todos\ src\ study-todos.js

5. React micro-front-end routing configuration

Prepare two routing components

Micro\ todos\ src\ home.js & μ\ todos\ src\ about.js

Micro\ todos\ src\ root.component.js

The routing file has been introduced into the public module,\ micro\ container\ src\ index.ejs

Modify the webpack configuration file to exclude the routing module packaging, micro\ todos\ webpack.config.js

(2) create micro-applications based on Vue

1. Create an application

Create an application: create-single-spa

1. Fill in the project folder with realworld

two。 Frame selection Vue

3. Generate a Vue 2 project

Because vue & & vue-router needs to be packaged through a common module, you need to configure non-packaging within the application

Micro\ realworld\ vue.config.js

Modify the project startup command: micro\ realworld\ package.json

Register the application: micro\ container\ src\ study-root-config.js

Micro\ container\ src\ index.ejs

Load vue & & vue-router

Import the application, and the application address can be accessed directly from the prompt of the browser.

2. Apply routing configuration

\ micro\ realworld\ src\ main.js

Micro\ realworld\ src\ App.vue

(3) create utility modules

1. Utility independent application creation

Used to place JavaScript logic shared across applications, it is also a separate application, which needs to be built separately and started separately.

1. Create an application: create-single-spa

1) fill in tools in the folder

2) Application Select in-browser utility module (styleguide, api cache, etc)

two。 Modify the port, start the application,\ micro\ tools\ package.json

Export public methods: micro\ tools\ src\ study-tools.js

Declare the application module access address in the template file: micro\ container\ src\ index.ejs

2. Use this method in React applications.

MicroFrontends\ micro\ todos\ src\ about.js

3. Use this method in Vue applications.

Micro\ realworld\ src\ main.js

Micro\ realworld\ src\ components\ Foo.vue

So much for sharing on how to create micro-applications based on React and Vue. I hope the above content can be of some help and learn more. If you think the article is good, you can share it for more people to see.

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.