主应用 vue2项目搭建

第一步、创建vue2的项目与正常创建无异，在这里不做过多描述；

第二部、将创建好的vue2项目作为主应用，在根目录先安装qiankung

yarn add qiankun # 或者 npm i qiankun -S

第三步、修改src目录下面的main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'Vue.config.productionTip = falseimport { registerMicroApps, start } from 'qiankun';
registerMicroApps([{name: 'vue2',entry: '//localhost:7000', // 运行微应用的地址container: '#container', // 展示的DOM容器 idactiveRule: '/app-vue2', // 跳转路径},{name: 'vue3',entry: '//localhost:7001',container: '#container',activeRule: '/app-vue3',},
]);
// 启动 qiankun
start();new Vue({router,store,render: h => h(App)
}).$mount('#app')

第四步、在src目录下面的App.vue，提供微应用展示的DOM

<template><div id="app"><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link> |<!--需要与main.js配置的跳转路由一致--><router-link to="/app-vue2">app-vue2</router-link> |<router-link to="/app-vue3">app-vue3</router-link></nav><router-view/><!--微应用在此展示--><div id="container"></div></div>
</template>

到此为止主应用配置完成

然后开始搭建微应用，在主应用与src同级创建一个examples文件夹用来存放微应用如图所示

主应用vue3搭建具体流程请查看：主应用vue3 点击跳转

微应用vue2搭建具体流程请查看：微应用vue2 点击跳转

微应用vue3搭建具体流程请查看：微应用vue3 点击跳转

乾坤qiankun框架搭建项目相关推荐

微前端vue项目实战 -- 乾坤qiankun框架（一）
背景: 公司研发的项目主要是 GIS地图为基础的管理系统,由主体项目(管理业务模块)+ GIS地图应用,由于 GIS地图应用模块会在多个地方使用,所以单独构建一个项目,分别在不同的业务场景中引用.交 ...
ABP框架搭建项目系列教程基础版
我现在要着手一个新的项目,也打算用这个框架,所以想要将我一步一步用这个框架的做项目的步骤和想法跟大家分享出来. 经过前面十二篇的基础教程,现在终于该做个总结了. 第一篇,我们建议新手朋友们先通过ABP ...
采用React框架搭建项目
使用vue框架也做了很多项目,基本的需求业务逻辑都没可满足,可是依然对框架内部工作原理不是很熟悉,只是套用一些指令方法去应用,做开发越接近本质收入越大. 原生的一些写法可能已经很过时了,但是仍然要熟悉 ...
Vue SEO 优化使用 Vapper SSR 服务器渲染框架搭建项目新手教程
Vapper 简介 Vapper 是一个基于 Vue 的服务端渲染(SSR)框架,它的核心目标是:简单.灵活.强大. 简单:尽最大的努力让开发 SSR 应用与开发 SPA 应用保持一致的体验,降&g ...
day18_项目框架搭建1
项目的工程目录: py_53 --根目录 py_api --子目录 day18_项目框架搭建 --项目工程目录 common -公用模块 excle.py -获取Excel表单的数据 handler_ ...
Koa入门（一）—— Koa项目基础框架搭建
Koa项目基础框架搭建项目初始化项目自动重启配置ES6语法基本目录搭建配置env信息自动加载路由统一异常处理自定义异常异常处理中间件中间件配置目录别名配置项目初始化 mkdir ...
Spring Boot Restful框架搭建和使用【持续更新中】
2019独角兽企业重金招聘Python工程师标准>>> 1 Spring Boot Restful框架搭建项目源码地址 2 SpringBoot框架使用技巧记录 2.1 pagea ...
(三) Angular2项目框架搭建心得
前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...
python搭建django框架,Python之Web框架Django项目搭建全过程
Python之Web框架Django项目搭建全过程 IDE说明: Win7系统 Python:3.5 Django:1.10 Pymysql:0.7.10 Mysql:5.5 注:可通过pip fre ...

乾坤qiankun框架搭建项目

主应用 vue2项目搭建

第一步、创建vue2的项目与正常创建无异，在这里不做过多描述；

第二部、将创建好的vue2项目作为主应用，在根目录先安装qiankung

第三步、修改src目录下面的main.js

第四步、在src目录下面的App.vue，提供微应用展示的DOM

到此为止主应用配置完成

然后开始搭建微应用，在主应用与src同级创建一个examples文件夹用来存放微应用如图所示

主应用vue3搭建具体流程请查看：主应用vue3 点击跳转

微应用vue2搭建具体流程请查看：微应用vue2 点击跳转

微应用vue3搭建具体流程请查看：微应用vue3 点击跳转

乾坤qiankun框架搭建项目相关推荐

最新文章

热门文章

乾坤qiankun框架搭建项目

主应用 vue2项目搭建

第一步、创建vue2的项目与正常创建无异，在这里不做过多描述；

第二部、将创建好的vue2项目作为主应用，在根目录先安装qiankung

第三步、修改src目录下面的main.js

第四步、在src目录下面的App.vue，提供微应用展示的DOM

到此为止主应用配置完成

然后开始搭建微应用，在主应用与src同级创建一个examples文件夹用来存放微应用 如图所示

主应用vue3搭建具体流程请查看：主应用vue3 点击跳转

微应用vue2搭建具体流程请查看：微应用vue2 点击跳转

微应用vue3搭建具体流程请查看：微应用vue3 点击跳转

乾坤qiankun框架搭建项目相关推荐

最新文章

热门文章

然后开始搭建微应用，在主应用与src同级创建一个examples文件夹用来存放微应用如图所示