Comments (24)
这个地方替换成相应的 vue 实现就可以了
qiankun/examples/main/index.js
Line 14 in ee8e098
from qiankun.
@guojingwen 不过比较奇葩的是,qiankun内部有一个执行机制,是需要render两次,其中最后一次只是为了传送loading 的状态,这个在vue里面会导致前面一个render在执行后,qiankun 的mount函数执行后,由vue的初始化dom会被第二次render覆盖掉 @kuitos
from qiankun.
@kuitos 建议将loading和appContent的分别提供两个函数接口,否则vue这种执行机制需要自己缓存上一次的appContent是否和本次的相同,如果相同就弃用,总感觉还是保持输入功能的单一性会更加好一点,也减少消耗
from qiankun.
现代的 UI library 原理都是一样的~
写了个 vue 的 demo,相关注释打开就能跑
see
qiankun/examples/main/index.js
Lines 17 to 41 in 50c7618
from qiankun.
应该不至于吧,我们这边的项目已经成功合入了多个微服务了.
你微服务导出了对应的生命周期么
`
let instance = null;
export async function bootstrap() {
console.log("react app bootstraped");
}export async function mount(props) {
console.log("props from main framework", props);
instance = new Vue({
el: "#app",
router,
store,
render: h => h(App),
});
}export async function unmount() {
console.log("unmount");
instance.$destroy();
instance = null;
}
或者
import singleSpaVue from "single-spa-vue";
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: h => h(App),
router,
store,
el:"#app"
},
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
`
大哥,有没有fork的代码,看看webpack构建的主项目,子项目,感谢。
我这里报个错误,跨域了,主项目parcel,子项目parcel;主项目webpack,子项webpack?
from qiankun.
@kuitos 这一段替换成 vue 并不能运行报错 访问 /vue 报错
example我是用vue-cli生成的 替换的代码如下
function render ({ appContent, loading }) {
if (!window.loaded) {
let framework = Vue.extend(Framework)
window.content = new framework()
Object.assign(content, {
content: appContent,
loading
})
window.content.$mount('#container')
} else {
Object.assign(window.content, {
content: appContent,
loading
})
}
window.loaded = true
}
from qiankun.
还是拜托给一下 vue 基座 的example配置
from qiankun.
@guojingwen vue的使用,需要在main.js中把这个注册过程包裹在window load后的事件里面,我试过single-spa里面有一个监听需要在load事件后5s内执行这个注册过程
`/**
- 匹配路由
- @param {string} 当前路由的路径
- @returns {Boolean} 返回是否
*/
function genActiveRule(routerPrefix) {
return location => location.pathname.startsWith(routerPrefix);
}
let lastContent = null;
/**
- dom渲染函数
- @param {string} 当前路由的路径
- @returns {Boolean} 返回是否
*/
function render({ appContent,loading }){
if(lastContent === appContent){
return;
}
lastContent = appContent;
document.querySelector("#micro-container").innerHTML = appContent;
}
let microInstance = false;
window.addEventListener("load", ()=>{
if(microInstance){
return;
}
console.log("事件加载了");
microInstance = true;
registerMicroApps(
[
{
name: "travel app", entry: "//localhost:8081/micro-user/business-travel", render:render, activeRule: genActiveRule("/user/business-travel")
},
],
{
beforeLoad: [
app => {
console.log("before load", app);
}
],
beforeMount: [
app => {
console.log("before mount", app);
}
],
afterUnmount: [
app => {
console.log("after unload", app);
}
],
},
);
start();
});`
from qiankun.
老哥回复的真迅速,我还在想办法联系issue的人有没有解决呢? 万分感谢!我试试看
from qiankun.
代码如下
`import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { start, registerMicroApps } from 'qiankun'
// import Framework from './framework'
Vue.config.productionTip = false
window.gvm = new Vue({
router,
render: h => h(App)
}).$mount('#app')
// render({ loading: true })
/**
匹配路由
@param {string} 当前路由的路径
@returns {Boolean} 返回是否
/
function genActiveRule(routerPrefix) {
return location => location.pathname.startsWith(routerPrefix);
}
let lastContent = null;
/*
dom渲染函数
@param {string} 当前路由的路径
@returns {Boolean} 返回是否
*/
function render({ appContent,loading }){
if(lastContent === appContent){
return;
}
lastContent = appContent;
document.getElementById("container").innerHTML = appContent
// document.querySelector("#container").innerHTML = appContent;
}
let microInstance = false;
window.addEventListener("load", ()=>{
if(microInstance){
return;
}
console.log("事件加载了");
microInstance = true;
registerMicroApps(
[
{ name: 'vue app', entry: '//localhost:7101', render, activeRule: genActiveRule('/vue') }
],
{
beforeLoad: [
app => {
console.log("before load", app);
}
],
beforeMount: [
app => {
console.log("before mount", app);
}
],
afterUnmount: [
app => {
console.log("after unload", app);
}
],
},
);
start();
});`
from qiankun.
@guojingwen 你是否忘记把main.js当做umd输出了? 需要vue.config.js里面配置一下(packageName自己命名):
configureWebpack: { devtool: "source-map", output:{ library: packageName, libraryTarget: "umd", jsonpFunction:
webpackJsonp_${packageName}, } },
from qiankun.
之前只配置了 libraryTarget
现在按照你说的配置下,还是不行,我的配置如下
from qiankun.
应该不至于吧,我们这边的项目已经成功合入了多个微服务了.
你微服务导出了对应的生命周期么
`
let instance = null;
export async function bootstrap() {
console.log("react app bootstraped");
}
export async function mount(props) {
console.log("props from main framework", props);
instance = new Vue({
el: "#app",
router,
store,
render: h => h(App),
});
}
export async function unmount() {
console.log("unmount");
instance.$destroy();
instance = null;
}
或者
import singleSpaVue from "single-spa-vue";
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: h => h(App),
router,
store,
el:"#app"
},
});
export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
`
from qiankun.
localhost:7101 是你官网vue的demo
from qiankun.
更新了下项目,放开vue的注释 确实能跑起来,
但是用 webpack 配置后,还是同样的问题,vue.config.js 也处理了
from qiankun.
@fenngding 原因找到了, 原来example主项目 用webpack 构建, 子项目(vue app)也需要用webpack构建
非常感谢!
from qiankun.
@guojingwen 大哥,有没有fork的代码,看看webpack构建的主项目,子项目,感谢
我这里报个错误
from qiankun.
跨域问题,目前我是规避了一下,没细研究,
终端执行 open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/guojingwen/Documents/MyChromeDevUserData
windows 方案差不多,网上搜一下
from qiankun.
@guojingwen 我这个是接入subApp子项目,就是vue-cli3配置的项目,然后配置好其他,就报这个错误了,你接入vue-cli3的子项目吗?
from qiankun.
是的,跨域问题,你网上搜搜
from qiankun.
主项目parcel,子项目parcel;主项目webpack,子项webpack? @ @guojingwen
子项目parcel接入就没有跨域问题,感觉是哪的配置问题,网上找了集中方法,包括您提供的,关闭了chrome跨域,还是报错
from qiankun.
基于Angular作为基座如何配置?
from qiankun.
这个问题已经解决我先关了,其他问题可以开别的 issue 来看
from qiankun.
@kuitos 我还没研究透, 子应用多个路由跳转还有些问题 vue的子应用 返回 并没有移除子应用dom
from qiankun.
Related Issues (20)
- [Bug]新版本chrome浏览器下,angular子应用接入qiankun,断点调试控制台this指向window,没有指向组件实例 HOT 4
- 乾坤 源码如何本地启动并调试 HOT 1
- 通过路由切换子应用时,会触发子应用的mount和unmount ,但是浏览器返回/前进路径时,不回触发钩子 HOT 1
- 通过路由切换子应用时,会触发子应用的mount和unmount ,但是浏览器返回/前进路径时,不回触发钩子 HOT 1
- 通过路由切换子应用时,会触发子应用的mount和unmount ,但是浏览器返回/前进路径时,不会触发钩子 HOT 1
- 通过路由切换子应用时,会触发子应用的mount和unmount ,但是浏览器返回/前进路径时,不会触发钩子 HOT 1
- 在主应用的某个路由页面加载子应用 然后跳转子应用 子应用白屏无法显示 刷新之后就可以正常显示 HOT 2
- 这个解决了吗
- [Feature Request] 能否提供类似于single-spa的import-map-overrides HOT 1
- 子应用是vue2,路由切换警告: [Vue Router warn]: No match found for location with path "/management/dashboard" HOT 1
- Frequent zoom-in and zoom-out of the interface causes the interface to break down. HOT 1
- 主应用使用umi4,react,子应用是vite+vue3,子应用单独运行没问题,在主应用中运行时接口 404,子应用使用的axios,写了baseURL,也在vite.config.js配置了代理 HOT 2
- [Bug]请遵循下文模板提交问题,否则您的问题会被关闭
- loadMicroApp 同时加载多个微应用渲染只显示某一个 HOT 1
- [RFC] 关于 qiankun 使用 cypress e2e 的 RFC HOT 2
- [Feature Request] say something
- [Bug]您们这个框架是把navigator.serviceWorker干掉了吗? HOT 1
- [Bug]q子应用点击返回时出现http://localhost:8080/app-vueundefined HOT 1
- [Bug]请遵循下文模板提交问题,否则您的问题会被关闭 HOT 1
- [Bug]global需要增加新的api,例如showOpenFilePicker之类
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from qiankun.