vue + qiankun 项目搭建

news2024/9/29 18:07:12

一、cli3构建vue2项目

1、前期工作：查看cli安装情况与安装

npm install -g @vue/cli

已安装情况查看：vue -V(大写的V)

2、新建项目

vue create main-project

3、选择自定义配置

配置选择

选择vue版本、babel、router、vuex、css预处理器、lint格式校验

选择vue 2.x

qiankun 子应用建议使用 history路由模式 

 选择自己喜欢的css预处理器

选择eslint标准配置

提交保存eslint都需要验证 

 

单独的配置文件

不保存这个配置 

项目创建成功

自己喜欢的eslint配置eslintrc.js 

module.exports = {
    root: true,
    env: {
            node: true
    },
    extends: [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    parserOptions: {
        parser: 'babel-eslint'
    },
    rules: {
        'semi': 'off',
        'quotes': 'off',
        'indent': ["error", 4],
        "space-before-function-paren": "off",
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    }
}

4、进入项目文件夹内 cd frame安装插件

安装依赖的插件 element ui、 axios

安装element ui:

npm i element-ui -S

安装完成后修改main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.use(ElementUI)

Vue.config.productionTip = false

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

 

安装axios:

npm install axios

新建了个文件夹api index.js 引用axios，统一处理api与使用qiankun与此无关

import Axios from 'axios'

到此只是建项目，两个项目一个main-project 和sub-project

主应用 main-project：

子应用 sub-project：

二、qiankun改造主应用

1、 主应用安装qiankun

npm install qiankun --save

2、给菜单增加一个router-link，to值为"/subProject"，并且在router-view的下面增加一个id为VueContainer的盒子，用于承载子应用。

3、 新增一个qiankun文件夹里面加个index.js。导入qiankun中的registerMicroApps和star两个方法，注册子应用并启动qiankun

import { registerMicroApps, start } from "qiankun";

export const useQiankun = () => {
    const apps = [
        {
            name: "sub-project",
            entry: "http://localhost:8091", // 主应用端口用8090，子应用8091
            container: "#VueContainer",
            activeRule: "/subProject", // 与route-link to的相同
            props: {
                msg: "这是父应用传过来的值，传递给子应用sub-project"
            }
        }
    ]

    registerMicroApps(apps, {
        beforeLoad: [
            (app) => {
                console.log(`${app.name}的beforeLoad`);
            }
        ],
        beforeMount: [
            (app) => {
                console.log(`${app.name}的beforeMount`);
            }
        ],
        afterMount: [
            (app) => {
                console.log(`${app.name}的afterMount`);
            }
        ],
        beforeUnmount: [
            (app) => {
                console.log(`${app.name}的beforeUnmount`);
            }
        ],
        afterUnmount: [
            (app) => {
                console.log(`${app.name}的afterUnmount`);
            }
        ]
    });

    start({ experimentalStyleIsolation: true, prefetch: "all" });
};

4、在main.js里 导入 qiankun/index, 注册子应用并启动

import { useQiankun } from './qiankun/index'    

vueApp.$nextTick(() => {
    useQiankun()
})

 

二、qiankun改造子应用

1、 主应用安装qiankun

npm install qiankun --save

2、先修改一下vue实例挂载的id，#app改为subApp便于区分

3、在src中增加一个文件夹qiankun，public-path.js，判断window.__ POWERED_BY_QIANKUN __，如果是从qiankun启动则将window. __ INJECTED_PUBLIC_PATH_BY_QIANKUN __ 的值赋值给 __ webpack_public_path __ 

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line camelcase, no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

 4、router/index.js改造，创造vue实例移入main.js

5、main.js 导入VueRouter、routes、 public-path移除原来的router

import "./public-path";
import VueRouter from "vue-router";
import routes from "./router";

6、main.js中创建vue实例的代码提到render函数里，并接收一个参数，

router实例也放入render函数,修改router/index.js，process.env.BASE_URL,指定base值为：“/subProject”

判断public-path的window.__POWERED_BY_QIANKUN__如果不是从qiankun启动，直接调用render表示独立运行

let instance
let router
function render(props = {}) {
    const { container } = props;
    router = new VueRouter({
        mode: "history",
        base: "/subProject",
        routes
    });
    instance = new Vue({
        router,
        store,
        render: (h) => h(App)
    }).$mount(container ? container.querySelector("#subApp") : "#subApp");
}
// 如果不是从qiankun启动，直接调用render表示独立运行
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

5、main.js 导出3个必需的方法bootstrap，mount和unmount；mount函数中调用render方法进行子应用渲染。unmount函数中将render方法中创建的vue实例销毁。

export async function bootstrap() {
    console.log("[vue] vue bapp 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;
}

整体的main.js

import "./qiankun/public-path";
import Vue from "vue";
import VueRouter from "vue-router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "./assets/main.css";
import App from "./App.vue";
import routes from "./router";
import store from "./store";

Vue.use(ElementUI);

Vue.config.productionTip = false;

let instance
let router
function render(props = {}) {
    const { container } = props;
    router = new VueRouter({
        mode: "history",
        base: "/subProject",
        routes
    });
    instance = new Vue({
        router,
        store,
        render: (h) => h(App)
    }).$mount(container ? container.querySelector("#subApp") : "#subApp");
}
// 如果不是从qiankun启动，直接调用render表示独立运行
if (!window.__POWERED_BY_QIANKUN__) {
    render();
}

export async function bootstrap() {
    console.log("[vue] vue bapp 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;
}

5、增加vue.config.js，

配置允许跨域：“ Access-Control-Allow-Origin：’*’ ”，并配置webpack的output.library和output.libraryTarget

const { name } = require('./package');
module.exports = {
    productionSourceMap: false,
    lintOnSave: process.env.NODE_ENV === 'development',
    devServer: {
        proxy: {
            "/cmp": {
                target: "https://11.11.9.206:8080",
                ws: true,
                changeOrigin: true,
                secure: false
                // pathRewrite: { "^/cmp/api": "" }
            }
        },
        headers: {
            'Access-Control-Allow-Origin': '*'
        }
    },
    configureWebpack: {
        name: name,
        output: {
            library: `${name}-[name]`,
            libraryTarget: 'umd', // 把微应用打包成 umd 库格式
            jsonpFunction: `webpackJsonp_${name}`
        }
    }
};

 6、最终样子       

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/375068.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【神经网络】GRU

【神经网络】GRU

1.什么是GRU GRU（Gate Recurrent Unit）门控循环单元，是循环神经网络（RNN）的变种种，与LSTM类似通过门控单元解决RNN中不能长期记忆和反向传播中的梯度等问题。与LSTM相比，GRU内部的网络架构较为简…
阅读更多...
Android 实现菜单拖拽排序

Android 实现菜单拖拽排序

效果图简介本文主角是ItemTouchHelper。它是RecyclerView对于item交互处理的一个「辅助类」，主要用于拖拽以及滑动处理。以接口实现的方式，达到配置简单、逻辑解耦、职责分明的效果，并且支持所有的布局方式。功能拆解功能实现4.1、实现接口自…
阅读更多...
【员工管理系统】

【员工管理系统】

员工管理系统前言需求分析系统设计系统框图所需技术系统实现编写代码测试前言 这是一个使用epoll实现TCP并发服务器，并让客户端登录服务器可以进行员工的管理，员工的信息存储在sqlite数据库中，对数据库进行增删改查实现对员工的添加&#xf…
阅读更多...
一文理解服务端渲染SSR的原理，附实战基于vite和webpack打造React和Vue的SSR开发环境

一文理解服务端渲染SSR的原理，附实战基于vite和webpack打造React和Vue的SSR开发环境

SSR和CSR 首先，我们先要了解什么是SSR和CSR，SSR是服务端渲染，CSR是客户端渲染，服务端渲染是指 HTTP 服务器直接根据用户的请求，获取数据，生成完整的 HTML 页面返回给客户端（浏览器）展…
阅读更多...
嵌入式 STM32 通讯协议--MODBUS

嵌入式 STM32 通讯协议--MODBUS

目录 一、自定义通信协议 1、协议介绍 2、网络协议 3、自定义的通信协议 二、MODBUS通信协议 1、概述 2、MODBUS帧结构 协议描述 3、MODBUS数据模型 4、MODBUS事务处理的定义 5、MODBUS功能码 6、功能码定义 7、MODBUS数据链路层 8、MODBUS地址规则 9、MO…
阅读更多...
SpringBoot 2.x ——使用 mail 实现邮件发送

SpringBoot 2.x ——使用 mail 实现邮件发送

文章目录前言环境、版本等pom依赖引入springboot项目配置文件获取邮箱授权码配置properties文件定义接口信息接收类编写邮件发送服务类编写接口swagger测试1、简单邮件发送2、html格式发送(支持附件)前言 最近再看xxl-job的源码，其中在邮件告警通知中使用到了告警信…
阅读更多...
Go调用dll 解决方案 dll查看工具

Go调用dll 解决方案 dll查看工具

准备工作 Go需要1.10版本，即支持动态链接库 基本调用代码 lib : syscall.NewLazyDLL("lib/plugin.dll") // 读取dll f : lib.NewProc("Sum") // 调用dll函数 res, _, _ : f.Call(param) // 传值 fmt.Println(res)可能出现的问题 %1 is not a …
阅读更多...
移动硬盘不显示怎么办？恢复硬盘的方法汇总

移动硬盘不显示怎么办？恢复硬盘的方法汇总

在日常工作和生活中，移动硬盘是非常重要的存储设备，它们可以储存大量的数据，比如照片、音乐、视频、文档等。但是，有时候你可能会遇到移动硬盘不显示的问题。这个问题通常会让人感到困惑，因为你无法访问移动硬盘里的数…
阅读更多...
Appium自动化测试之启动时跳过初始化设置

Appium自动化测试之启动时跳过初始化设置

Appium每次启动时都会检查和安装Appium Settings，这是完全没有必要的，在首次使用Appium连接设备是Appium Settings便已经安装好。怎样跳过安装Appium Settings呢？之前的做法是修改appium中的源文件中的android-helpers.js实现，如M…
阅读更多...
足球俱乐部管理系统

足球俱乐部管理系统

技术：Java、JSP等摘要：网站是一种主要的渠道。人们通过互联网快速、准确的发布信息、获取信息。而足球俱乐部是足球职业化、专业化的一个标志，是足球运动员以足球谋生时，所被聘用的机构，应运时代发展，规模、…
阅读更多...
观测云产品更新｜新增用户访问监测自动化追踪；新增 CDN 质量分析；新增自定义查看器导航菜单等

观测云产品更新｜新增用户访问监测自动化追踪；新增 CDN 质量分析；新增自定义查看器导航菜单等

观测云更新 用户访问监测优化 新增用户访问监测自动化追踪 用户访问监测新增自动化追踪，通过“浏览器插件”的实现方式，使用浏览器记录用户访问行为，创建无代码的端到端测试。更多详情可参考文档【 自动化追踪 】https://docs.guance.com/…
阅读更多...
本机安装docker，redis并进行连接实战

本机安装docker，redis并进行连接实战

1、背景 win10系统，想要在本机搭建一套开发环境，需要安装zk，redis等组件，一个个的安装显然效率太低且复杂，这里考虑安装docker及相关镜像 2、 docker安装 docker官网下载:https://docs.docker.com/desktop/install/…
阅读更多...
Git的简述

Git的简述

Git 文章目录GitGit概述版本控制工具集中式管理控制工具分步式管理控制工具控制机制Git和代码托管中心安装Git软件Git常用命令Git概述 Git是一个免费的、开源的分步式版本控制系统，可以快速的处理从小型到大型的各种项目 Git 易于学习，占地面积小&…
阅读更多...
【Linux | ELK 8.2】搭建ELKB集群Ⅱ—— 安装 Logstash 和 Kibana

【Linux | ELK 8.2】搭建ELKB集群Ⅱ—— 安装 Logstash 和 Kibana

目录2.3 安装Logstash（1）检查系统jdk版本（2）下载logstash（3）安装logstash（4）配置logstash（5）启动与测试方法1方法2（主要的使用方式）&a…
阅读更多...
Python--深入浅出的装饰器--1

Python--深入浅出的装饰器--1

本章一起深入浅出一下装饰器。前面我们讲过一章装饰器了。不知道各位看懂了多少。每太看懂也没关系，本章就一起实操一下。简单的例子例1例2上述的两个例子，执行结果为：1423.为什么呢？？？解析语法糖&#xff…
阅读更多...
sed 功能详解

sed 功能详解

介绍sedsed是一种流编辑器，它一次处理一行内容，把当前处理的行存储在临时缓冲区中（buffer）,称为"模式空间"，接着sed命令处理缓冲区中的内容，处理完成后，把缓冲区的内容送往屏幕&#…
阅读更多...
面向Elasticsearch的高性能应用网关INFINI Gateway的介绍

面向Elasticsearch的高性能应用网关INFINI Gateway的介绍

1.微服务的API网关介绍网关的含义很多，应用范围也很广，不同的领域理解也不一样，站在分布式领域基于微服务的架构风格中，API网关其实就是一个微服务系统的统一入口。往往微服务是指由多个应用组成的一个个独立的服务系统&#xff0…
阅读更多...
【C/C++】类型限定符extern、const、Volatile、register

【C/C++】类型限定符extern、const、Volatile、register

1、extern： 声明一个变量，extern声明的变量没有建立存储空间。 extern int a ; //变量在定义的时候创建存储空间。 ①当我们在编译器中试图运行以下代码，系统会报错。 错误原因是“无法解析外部符号_a”.系统认为变量a是没有开辟内存空间的…
阅读更多...
【3】MyBatis+Spring+SpringMVC+SSM整合一套通关

【3】MyBatis+Spring+SpringMVC+SSM整合一套通关

三、SpringMVC 1、SpringMVC简介 1.1、什么是MVC MVC是一种软件架构的思想，将软件按照模型、视图、控制器来划分 M：Model，模型层，指工程中的JavaBean，作用是处理数据 JavaBean分为两类： 一类称为实体…
阅读更多...
网络应用之静态Web服务器-多任务版

网络应用之静态Web服务器-多任务版

静态Web服务器-多任务版学习目标能够写出多线程版的多任务web服务器程序1. 静态Web服务器的问题目前的Web服务器，不能支持多用户同时访问，只能一个一个的处理客户端的请求，那么如何开发多任务版的web服务器同时处理 多个客户端的请求?可以使…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023