This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

preface

Hello, everyone. In the previous article, we shared some concepts and characteristics of Qiankun, and the basic steps of realizing a micro-front-end application based on Qiankun. Finally, we took Qiankun Jiavue2.0 as an example and gave some core codes for the rapid construction of the Qiankun micro-front-end. Then, based on the operation steps and core code in the previous article, a simple and complete Qiankun micro front-end project will be realized from scratch. In this project, VUe2.0 is still the main project construction. Without further ado, let’s get started.

The main application

  • Using vue scaffolding to create a VUE 2.0 project: Qiankun-main (Vue CREATE Qiankun-main), it is recommended to select manual mode to select the Router and use history routing mode
  • Open project Qiankun – Main, install QIANkun (NPM Install Qiankun — Save)
  • Modify app. vue to add a VueChild router-link with a value of “/ VueChild” and add a div box with a vueContainer id under the router-view (for hosting child apps).
  • Vue: This is a Home page in Qiankun-main (optional)
  • Change views/ about. vue to: This is an About page in Qiankun -main (optional)
  • Modify main.js, import the registerMicroApps and Start methods in Qiankun, register the sub-application and start qiankun

Take a look at the complete modified code below (the steps to create the project and install the Qiankun are omitted)

<! -- App.vue -->
<template>
	<div id="app">
		<div id="nav">
			<router-link to="/">Home</router-link> |
			<router-link to="/about">About</router-link> |
			<router-link to="/vueChild">VueChild</router-link> | <! -- New section -->
		</div>
		<router-view />
		<div id="vueContainer"></div><! -- New section for hosting child applications -->
	</div>
</template>

<! -- views/Home.vue -->
<template>
	<div class="home">This is a home page in qiankun-main</div>
</template>

<! -- views/About.vue -->
<template>
	<div class="home">This is an about page in qiankun-main</div>
</template>
Copy the code
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
/ / = = = = = = = = = = = = = = = = = = = = = = additions to start = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
import {registerMicroApps, start} from 'qiankun' // Add two methods in Qiankun
const apps = [
{
	name:'qiankun-child'.// The name of the child application
	entry:'//localhost:8082'.// The domain name of the subapplication
	container:'#vueContainer'.// The container that hosts the child application, as defined in app.vue above
	activeRule:'/vueChild'.// Route of the activated subapplication
}
]
registerMicroApps(apps);// Register child applications
start();/ / start qiankun
/ / = = = = = = = = = = = = = = = = = = = = = = new content end = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
new Vue({
	router,
	render: h= > h(App)
}).$mount('#app');

// router/index.js
/ /... The original code that does not need to be modified is omitted. Here is the modified code
const router = new VueRouter({
	mode:'history'.base: ' ',
	routes
})
Copy the code

Micro application

Js, vue.config.js and router/index.js are the main files that need to be modified in the micro-application. The rest of the pages can be changed or not according to your own preference

  • Use vue scaffolding to create a Vue 2.0 project: Qiankun-Child (vue create QiAgainkun-Child). It is recommended to select manual mode to select the Router and use history routing mode
  • Update views/ home. vue to add “This is a Home page in Qiankun-child”
  • [views/ about. vue] change the content to: “This is an About page in Qiankun-child”
  • Modify main.js (required)
    • Extract the part of the code that creates the Vue instance into a function called render, which takes one parameter, props
    • __powered_by_qiankun __, The window. __ INJECTED_PUBLIC_PATH_BY_QIANKUN __ value will be given to webpack_public_PATH __ if it is booted from the Qiankun. Otherwise, the child application will run independently by calling the Render method
    • Export the three required methods bootstrap, mount, and unmount; The bootstrap function body can be empty but the function must be exported. The mount function calls the render method for subapplication rendering. The unmount function destroys the vue instance created in the Render method.
  • Modify router/index.js to set the base value to “/vueChild”
  • Create vue.config.js and configure in this file to Allow cross-domain: “access-Control-allow-origin: ‘*'” and configure output.library and output.libraryTarget for webpack

The complete code of each part is as follows:

<! --======================== views/Home.vue ====================-->
<template>
	<div class="home">
		<img alt="Vue logo" src=".. /assets/logo.png" />
		<h1 style="color:red;">This is a home page in qiankun-child</h1>
		<HelloWorld msg="Welcome to Your Vue.js App" />
	</div>
</template>

<! --======================== views/About.vue ====================-->
<template>
	<div class="About">		
		This is an about page in qiankun-child
	</div>
</template>
Copy the code
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

let instance = null; // Set global variables to save or destroy Vue instances
function render(props){
	const { container } = props;
	instance = new Vue({
		router,
		render: h= > h(App)
	}).$mount(container ? container.querySelector("#app") : "#app");// Use to qualify #app in the current context to prevent collisions with #app in the main application
}

if(window.__POWERED_BY_QIANKUN__){
	__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}else{
	render();
	console.log('Child application runs independently')}export async function bootstrap(props){
	console.log('I don't have to do anything here for a while, but the method has to be exported.')}export async function mount(props){
	render(props);// Start from Qiankun
}

export async function unmount(props){
	instance.$destroy();// Destroy the child application instance
}
Copy the code
//vue.config.js
module.exports = {
	devServer: {port:8082.headers: {"Access-Control-Allow-Origin": "*"}},configureWebpack: {output: {library:'qiankun-child'.libraryTarget:'umd'}}}Copy the code
// router/index.js
/ /... Original code omitted
// The modified code
const router = new VueRouter({
	mode:'history'.base:'/vueChild',
	routes
});
Copy the code

Start the application

So that’s the complete code for the main application and the child application, the code is implemented and now we’re going to run it and see what it looks like. In the terminal of the main application qiankun-Main and its sub-application Qiankun-Child, we ran NPM Run serve to start the two applications, and then opened the two link addresses respectively. We found that: In addition to its own content in the main app, you can also click on the VueChild link to load the content in the child app. A link that opens a child app can also run independently. That’s the beauty of the micro front end.

  • Independent running diagram of subapplications

  • Qiankun main application operation map

  • Add sub-applications to the primary application

conclusion

In this paper, we take qiankun plus vue2.0 as an example to build a simple micro front-end application step by step from scratch. We believe that the characteristics mentioned above should be felt by our friends through this practice. I wonder if any of you have noticed that in this practice, we all use VUE technology stack and route is in history mode, so how to implement it if we want to change to hash mode, and how to access other technology stacks (such as React)? We will continue to share with you in the next article. That’s it for this article.

Like small partners welcome to praise attention and comment oh!