vue2使用qiankun框架笔记

前言

本篇文章是针对vue项目巨石应用，对 qiankuan框架 的一份使用归纳，中间会记录一些遇到的问题和解决方案，如果喜欢自己探索的同学，也可以自行前往qiankun官网学习。同时也欢迎各位同学在评论区，说明自己遇到的问题，一同探讨。

1. 创建项目

1.1 创建项目和选择预置

vue create 项目名称

项目预置，选择手动选择功能

以下是项目预置选项参照，为了避免eslint配置的麻烦，就不使用了。着重说明qiankun框架的使用。

1.2 记录项目结构和依赖

项目结构如下

package.json

{
   
   
  "name": "main-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
   
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
   
   
    "core-js": "^3.8.3",
    "vue": "^2.6.14",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
   
   
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

2. 使用qiankun框架（让微应用如iframe般嵌入到主应用中）

2.1 主应用下载乾坤，注册微应用

主应用下载qinakun：

npm i qiankun -S

主应用的main.js中注册微应用。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

import {
   
    registerMicroApps, start } from "qiankun";

new Vue({
   
   
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

// 根据路由配置
registerMicroApps([
  {
   
   
    name: "micro1", // 必须与微应用注册名字相同
    entry: "http://localhost:8081", // 入口路径，开发时为微应用所启本地服务，上线时为微应用线上路径
    container: "#micro-app", // 微应用挂载的节点
    activeRule: "/micro1", // 当访问路由为 /micro-vue 时加载微应用
    props: {
   
   
      msg: "我是来自主应用的值-micro1", // 主应用向微应用传递参数
    },
  },
  // {
   
   
  //   name: "micro2-app",
  //   entry: "http://localhost:8082",
  //   container: "#micro-app",
  //   activeRule: "/micro2",
  //   props: {
   
   
  //     msg: "我是来自主应用的值-micro2",
  //   },
  // },
]);
start();

但是此时主应用还没有相关的container，让我们进行改造。

2.2 改造主应用，创建微应用DOM入口

（1）为了方便编写样式，下载sass和sass-loader，当然你也可以使用其他方案。

npm i sass
npm i sass-loader

（2）删除views文件夹中的原有文件，添加home.vue，修改路由文件和App.vue

router/index.js：