Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

preface

Now that we have created the root configuration for the microfront, let’s create a child application first!

NPM install -g vue NPM install -g @vue/cli-service-global NPM install -g @vue/cli-service-global create-single-spa --moduleType app-parcelCopy the code

Create our child application

  1. Create a subapplication name



2. Sub-apps use frameworks

Here we choosevue



3. Identify the name



Ps: If vuE-CLI is not installed, the following error occurs

4. Whether you need to use Taobao mirror (choose on demand!)



5. Version selection

Vue2 is used here



After running, the project structure is as follows



Congratulations, you have completed a big step! So let’s run it when we’re done

npm run serve
Copy the code

Enter the service, are you looking forward to the vUE project launch interface? Then you may be disappointed!



The following prompt appears, presumably to say that the microfront is running in “integrated” mode because the standalone-single-spa-webpack-plugin is disabled. This means that it cannot work as a standalone application without changing the configuration. But don’t worry, we have a problem with the way we’re running, and we’re going to change the root configuration next! If you just want to see if it’s done, we can run it

npm run serve:standalone
Copy the code

Start the service directly!

conclusion

In this chapter we created an application called NavBar, and in the next section we will introduce it in our root configuration!