🤖 开始
创建主应用
- 创建
vue主应用main
- 创建
vue create main
-
cd main执行yarn安装依赖，并本地启动yarn serve(或者修改为yarn dev)
-
cd main
yarn
yarn serve (或者修改为yarn dev)
- 安装qiankun依赖
yarn add qiankun
- 进入
src/main.js
- 进入
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 导入qiankun所需方法
import {
registerMicroApps, // 注册子应用
runAfterFirstMounted, // 当地一个子应用装载完毕
setDefaultMountApp, // 设置默认装载的子应用
initGlobalState, // 微前端之间的通信
start, // 启动
} from 'qiankun'
// 渲染主应用
new Vue({
render: function (h) { return h(App) },
}).$mount('#container')
// 注册子应用
registerMicroApps([
{
name: 'one',
entry: '//localhost:6661',
container: '#micro-view',
activeRule: '/one',
},
{
name: 'two',
entry: '//localhost:6662',
container: '#micro-view',
activeRule: '/two',
},
],
{
beforeLoad: [
app => {
console.log('beforeLoad');
}
],
beforeMount: [
app => {
console.log('beforeMount');
}
],
beforeUnmount: [
app => {
console.log('beforeUnmount');
}
],
afterUnmount: [
app => {
console.log('afterUnmount');
}
]
})
setDefaultMountApp('one')
// 第一个子应用加载完毕后回调
runAfterFirstMounted(()=>{
console.log('第一个子应用加载完毕后的回调');
})
// 启动qiankun
start()
- 修改
public/index.html内的id为container
- 修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="container"></div>
<!-- built files will be auto injected -->
</body>
</html>
- 修改
src/App.vue内容如下
- 修改
<template>
<div id="main">
这是主应用文字
<br>
<button @click="changeView('/one')">子应用one</button>
<button @click="changeView('/two')">子应用two</button>
<hr>
<!--这里的 micro-view 对应的是上面 main.js 里面的子应用配置的 container: '#micro-view' -->
<div id="micro-view"></div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
},
methods: {
changeView(who){
window.history.pushState(null, who, who)
},
}
}
</script>
<style>
#main {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- 增加
vue.config.js，自定义我们主应用的启动端口为3334
- 增加
module.exports = {
devServer: {
port: 3334
}
}
-
运行项目
出现错误
-
此时，出现错误是正常的，因为我们还没有启动我们的子应用，不对，是我们连子应用都没搞呢，接下来，我们搞一下子应用one。
3. 实践基于qiankun的微前端demo - 子应用e
网友评论