Micro front end Qiankun (Vue) using tutorial

preface

At present, the technology update and iteration of front-end is very fast. I only learned about the concept of micro front-end at the beginning of 2021. Maybe I was not well informed. As for the micro front end concept to my understanding of the popular say: micro front end is a page of a function independent of a project development, deployment. For example: My project uses iframs to introduce baidu website to use the same.

Tool Version

  • NPM – > 6.14.13
  • The node – > 14.17.3
  • @ vue/cli – > 4.5.13

Creating the primary application

Create folder VUe-Qiankun. Both the primary and child applications are created in this folder

Vue scaffold create application command:

Execute command:

vue create mian
Copy the code

Git Bash Here is not an option.

Installation successful:

Creating a Child application

The child application is created in the same way as the main application, except that the project name is different. The name of the main application folder is Mian, and the name of the sub-application is subapp.

Folder Details:

Main application installation Qiankun

Installation command:

npm i qiankun -S
Copy the code

package.json

{" name ":" main ", "version" : "0.1.0 from", "private" : true, "scripts" : {" serve ":" vue - cli - service serve ", "build" : "Vue-cli-service build", "lint": "vue-cli-service lint", "dependencies": {"core-js": "^3.6.5", "qiankun": "^2.4.10", // Universe "vue": "^2.6.11"}, // omit.... }Copy the code

Active Application Configuration

main.js

Import Vue from 'Vue' import App from './ app.vue 'vue.config. productionTip = false registerMicroApps, start } from 'qiankun'; Let apps = [{name:'subapp', entry:'//localhost:8080',// Address of the subapp. ActiveRule :'/ subApp ',// Access the rules of the child app, such as: Localhost :8081/subapp}] // Register subapp registerMicroApps(apps); / / start the start (); new Vue({ render: h => h(App), }).$mount('#app')Copy the code

Sub-application Configuration

Create the public-path.js file in the root directory

//public-path.js

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
Copy the code

mian.js

import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false let instance = null; function render(props = {}) { const { container } = props; instance = new Vue({ render: (h) => h(App), }).$mount(container ? container.querySelector('#app') : '#app'); } // run independently if (! window.__POWERED_BY_QIANKUN__) { render(); } export async function bootstrap() { console.log('[vue] vue app bootstraped'); } export async function mount(props) { console.log('[vue] props from main framework', props); render(props); } export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ''; instance = null; }Copy the code

Locally start the master application and child application

The child application is started first, because the main.js apps of the main application is set to port 8080.

Let apps = [{name:'subapp', entry:'//localhost:8080',// Address of the subapp. ActiveRule :'/ subApp ',// Access the rules of the child app, such as: Localhost :8081/subapp}]Copy the code

test

Visit the main application: http://localhost:8081/

Accessing child applications:http://localhost:8081/subapp

Oh! Failed access, still on the main application page. There is a cross – domain error.

Resolve cross-domain problems

The website of Qiankun has been available for a long time

Let’s create the file and then copy it and restart the primary application and the child application.

Revisit the child application

Source link

Vue uses micro Front-end Framework (Qiankun)

conclusion

The official documentation of Qiankun is quite detailed, this tutorial is just a small introductory tutorial, more difficulties are still to come, such as packaging some questions, or we need to lose our hair to explore. In my opinion, Qiankun brings good project management to the front end. Multiple projects do not need to be placed in one project directory, and multiple UIs can be used for development. All in all, convenience, especially old projects. I don’t know if there are any old projects transformed into micro front end tutorials.