# qiankun

**Repository Path**: lanbao123/qiankun

## Basic Information

- **Project Name**: qiankun
- **Description**: 搭建一个简易 的乾坤框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-24
- **Last Updated**: 2024-06-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 官网：https://qiankun.umijs.org/zh/guide
### 项目实践：(vue2--history 路由模式)
1.npm install -g @vue/cli
2.vue create my-vue2-main(基站)  (在选择框架，箭头没法使用，可以用数字2代替)
3.vue create my-vue2-app1 （子应用1）
4.vue create my-vue2-app2  （子应用2）
5.安装router  npm i vue-router@2

#### 1.安装：npm i qiankun -S
    
#### 2.qiankun.js
  ```
  import { registerMicroApps, start } from "qiankun";
  export function qiankunStart() {
    registerMicroApps([
      {
        name: "app1",
        entry: "//localhost:3001",
        container: "#container",
        activeRule: "/app1",
        // activeRule: (location) => location.hash.startsWith("#/app1"),  hash 模式
      },
    ]);
    // 启动 qiankun
    start();
  }
``` 
#### 3.mian.js 引入
 ```
  import Vue from "vue";
  import App from "./App.vue";
  import { qiankunStart } from "./qiankun";
  
  Vue.config.productionTip = false;
  
  qiankunStart();
  new Vue({
    render: (h) => h(App),
  }).$mount("#app");
  ```
1.src/public-path.js
 ```
    if (window.__POWERED_BY_QIANKUN__) {
      __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
    }
   ```
2.main.js
 ```
  import "./public-path";
  import Vue from "vue";
  import VueRouter from "vue-router";
  import App from "./App.vue";
  import { routes } from "./router";
  
  Vue.config.productionTip = false;
  
  let router = null;
  let instance = null;
  function render(props = {}) {
    const { container } = props;
    router = new VueRouter({
      base: window.__POWERED_BY_QIANKUN__ ? "/app-vue/" : "/",  // hash 模式下删掉
      mode: "history",  //  hash 模式下 hash
      routes,
    });
  
    instance = new Vue({
      router,
      render: (h) => h(App),
    }).$mount(container ? container.querySelector("#app") : "#app");
  }
  
  // 独立运行时
  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;
    router = null;
  }
```

3.vue.config.js

  ```const { name } = require("./package");
  module.exports = {
    lintOnSave: false,
    devServer: {
      port: 3001,
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
    },
    configureWebpack: {
      output: {
        library: `${name}-[name]`,
        libraryTarget: "umd", // 把微应用打包成 umd 库格式
        chunkLoadingGlobal: `webpackJsonp_${name}`, // webpack 5 需要把 jsonpFunction 替换成 chunkLoadingGlobal
      },
    },
  };
```