微前端：使用qiankun框架从 0-1 搭建vue构成微前端项目

第一步：新建项目

新建 main 主应用和两个使用 vue/cli 创建的子应用

vue create main
vue create vue2-app-1
vue create vue2-app-2

第二步：所有应用都安装 qiankun

yarn add qiankun

第三步：主应用引入 qiankun

main 项目中的 main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import { registerMicroApps, start } from "qiankun";Vue.config.productionTip = false;registerMicroApps([{name: "vue2 app 1", //子应用名称entry: "//localhost:10001", //子应用端口号container: "#v2-app-1", //子应用挂载的元素activeRule: "/v2-app-1", //子应用路径},{name: "vue2 app 2",entry: "//localhost:10002",container: "#v2-app-2",activeRule: "/v2-app-2",},
]);
// 启动 qiankun
start();new Vue({router,render: h => h(App),
}).$mount("#app");

main 项目中的 App.vue

<template><div id="app"><h1>主应用</h1><nav><router-link to="/v2-app-1">v2-app-1</router-link>|<router-link to="/v2-app-2">v2-app-2</router-link></nav><!-- 子应用占位 --><div id="v2-app-1"></div><div id="v2-app-2"></div></div>
</template>

第四步：子应用配置

在 src 目录新增 public-path.js：

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

入口文件 main.js 修改，为了避免根 id #app 与其他的 DOM 冲突，需要限制查找范围。

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/" : "/",mode: "history",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;
}

打包配置修改（vue.config.js）：

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

将 router 中的 routes 进行导出

src/router/index.js

export default routes;

运行子应用

yarn serve

如果报错了就降级 vue/cli 到 4 版本

    "@vue/cli-plugin-babel": "~4.0.0","@vue/cli-plugin-router": "~4.0.0","@vue/cli-service": "~4.0.0",

第五步：启动主应用

main

yarn serve

结论

最终一个简单的微前端就配置好了，可通过主应用的路由来控制显示哪个子应用
demo 项目地址

微前端：使用qiankun框架从 0-1 搭建vue构成微前端项目相关推荐

idea 构建java 微服务_使用 IDEA 从 0 开始搭建 Spring Cloud 微服务
以下内容均来源于一个微服务初学者的实践,仅供参考. 微服务架构首先启动 Spring Cloud Eureka 注册中心,其他部分都作为服务注册到 Eureka ,并通过注册的服务名互相访问.Spr ...
微赞php.ini_PHP源码：微赞纯净版框架V8.0（更新至8.4_20180711）+人人商城模块一键更新免去繁琐手动更新...
很多朋友在用着微赞,微赞里面有非常多的模块,这些模块要好几百个,占用了几百兆甚至上G的空间.虽然这么多模块,但真正去用的可能只有其中的寥寥几个,可能主要使用的就是人人商城.为了更好的服务于西瓜们,搜刮 ...
从零开始搭建vue+element-ui的前端开发框架
最近需要进行下前端开发,特此记录下前端开发框架搭建过程 1 安装node.js 官网下载安装即可官网地址:http://nodejs.cn/download/ 2 安装webpack 在命令行里面输 ...
如何从0开始搭建Vue组件库
前言: 组件设计是通过对功能及视觉表达中元素的拆解.归纳.重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,將这些组件整理在一起,便形成组件库.本文我们主要讲述基于 Va ...
vue简易微前端项目搭建（一）：项目背景及简介
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
Web前端三大主流框架是什么？Web前端前景与就业形势
近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师.开发工程师.软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员.那么Web前端三大主流框架是什么呢? 一.We ...
vue简易微前端项目搭建（二）：子项目模板及项目脚手架搭建
github传送门: 1.h5主项目 2.项目脚手架 3.子项目模板系列文章传送门: vue简易微前端项目搭建(一):项目背景及简介 vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建 vu ...
Web前端三大主流框架是什么？Web前端前景与就业形势分析
近十年以来,IT行业发展火热,衍生了很多新职业,例如UI设计师.开发工程师.软件测试工程师等等,在众多备受瞩目的新生职业中,Web前端工程师是其中的一员.那么Web前端三大主流框架是什么呢? 一.We ...
微前端vue项目实战 -- 乾坤qiankun框架（一）
背景: 公司研发的项目主要是 GIS地图为基础的管理系统,由主体项目(管理业务模块)+ GIS地图应用,由于 GIS地图应用模块会在多个地方使用,所以单独构建一个项目,分别在不同的业务场景中引用.交 ...

微前端：使用qiankun框架从 0-1 搭建vue构成微前端项目

第一步：新建项目

第二步：所有应用都安装 qiankun

第三步：主应用引入 qiankun

第四步：子应用配置

第五步：启动主应用

结论

微前端：使用qiankun框架从 0-1 搭建vue构成微前端项目相关推荐

最新文章

热门文章