Experience from 0 to 1(Hash mode)

Because the market volume is serious, or have to learn about the micro front end, looking forward to V3 come YYDS ~

Start by creating two Vue projects

/ / main program
vue create qiankun_main
/ / component
vue create qiankun_child

? Please pick a preset:
  Default ([Vue 2] babel, eslint)  // I don't like ESLint so you get the idea
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) // I haven't tested Vue3 yet, I'll have a chance to write it down later
> Manually select features // Manual configuration has its own dependencies


? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript // Simple I can't ts! Don't inside me!
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>( ) Linter / Formatter // I don't like esLint, probably because I like it
 ( ) Unit Testing
 ( ) E2E Testing
 
? Choose a version of Vue.js that you want to start the project with
> 2.x
  3.x (Preview)

// If you want to create a Router, you need to create a history.
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
// Since I set CSS pre-processors, I use sass! Delicious ~
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass) // This is fast, so choose this ~
  Less
  Stylus
// Configure yyDS yourself
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files  // Save them in their own configuration files
  In package.json // Save in package.json file
// Whether to remember the current configuration so that you can create the project directly next time
? Save this as a preset for future projects? (y/N) y // Remember, easy to operate again
? Save preset as: vue-qiankun-preset // Name the configuration
/* Long wait */
$ cd qiankun_main
$ npm run serve
// Subproject installation, using the previous configuration
? Please pick a preset:
> vue-qiankun-preset ([Vue 2] node-sass, babel, router, vuex) // This is the last configuration
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features
Copy the code

Qiankun Configuration (this landlord application Hash version)

// Install the Qiankun (only the main application is installed)
$ yarn add qiankun  # or npm i qiankun -S # or cnpm i qiankun -S
// Ensure the integrity of dependency packages
$ npm install # or cnpm install
Copy the code

Qiankun.js – Encapsulation JS

import {
    registerMicroApps,
    start
} from 'qiankun';

const getActiveRule = (hash) = > (location) = > location.hash.startsWith(hash);

// Register the microapplication
registerMicroApps([{
    name: 'child'./ / registered name
    entry: '//localhost:8082'.// Subapplication port (local)
    container: '#app'.// The ID of the current service used to render the microservice (app.vue)
    activeRule: getActiveRule('#/child'), // Subapplication root route hash (official recommended history)
    ActiveRule: '#/child' can also be written directly here, but this will not work if the main application is in history mode or deployed in a non-root directory
    props: { // Pass in the value of the child application
        /** * personal habit: pass data child application get data */
        data: {
            say: 'I am the father's greeting.'}}},]);// Launch our lovely micro service
start();
Copy the code

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './qiankun' // Reference encapsulates JS

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h= > h(App)
}).$mount('#app')
Copy the code

Qiankun Configuration (Local sub-application Hash version – slightly more troublesome than the main application)

#### subapp qiankun_Child/* main.js */
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;

let instance = null;

// Dynamic routing configuration
if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

// Direct rendering of non-Qiankun environments
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// The parent application has reached the child application's life cycle (in short: the parent application's route is currently equal to the child application's activeRule)TODO:activeRule #/child = /child
export async function bootstrap() {
    console.log('[vue] vue app bootstraped');
}
// The parent application has reached the life cycle of the route configured by the child application (simple: the route address corresponds to the route address of the child application and is preceded by the parent application activeRule)TODO:ActiveRule #/child = /child/ Child application route
export async function mount(props) {
    store.commit("setQiankun", props);
    console.log('[vue] props from main framework', props);
    render(props);
}
// The lifecycle of the parent application when it leaves the child application (simple: routing does not spell the child application)
export async function unmount() {
    instance.$destroy();
    instance.$el.innerHTML = ' ';
    instance = null;
}

function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    store,
    render: (h) = > h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}
Copy the code

Vue.config.js – Need to create your own

let v = '1.0.0'; / / version number
module.exports = {
    configureWebpack: {
        output: { // Output refactoring package compiled file name [module name.version number.js]
            library: `${v}-[name]`.libraryTarget: 'umd'.// Package the child application into the UMD library format
            jsonpFunction: `webpackJsonp_${v}`,}},devServer: {
        headers: {
            'Access-Control-Allow-Origin': The '*',}}}Copy the code

Router /index.js Configures the route

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const apiName = window.__POWERED_BY_QIANKUN__ ? '/child' : ' ';

const routes = [
  {
    path: `${apiName}/index`.name: 'index'.component: () = > import('@/views/system/home')}]const router = new VueRouter({
  routes
})

export default router
Copy the code

Store/index VUEX js configuration

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    qiankun: null
  },
  mutations: {
    setQiankun(state,v){
      state.qiankun = Object.assign({},v); }},actions: {},modules: {}})Copy the code

home.vue

<template>
  <div>
      <div>Child pages</div>
      <div>{{props}}</div>
  </div>
</template>

<script>
export default {
  created(){
    this.props = this.$store.state.qiankun.data.say;
  },
  data(){
    return{
      props: ' '}}}</script>

<style lang="scss">

</style>
Copy the code

rendering

The main application

Enter the sub-application route in the primary application

The next article should update the configured hash version of the deployed service as you go along