chore: demo update

docs/zh-cn/changelog.md

@@ -22,6 +22,7 @@
 - **Update**
 
   - 📝 优化了在非inline模式下，module类型script元素的执行方式
+  - 📝 优化了报错日志信息，增加应用名称
 
 
 ### 0.4.0

examples/children/angular11/src/app/second/second.component.html

@@ -1,2 +1,3 @@
 <p>page2 works!</p>
+<div class="test-btn">test</div>
 <a routerLink="/" routerLinkActive="active">返回home</a>

examples/children/angular11/src/app/second/second.component.less

@@ -0,0 +1,12 @@
+.test-btn {
+  height: 50px;
+  width: 100px;
+  background-color: red;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+}

examples/children/react16/src/pages/page2/page2.css

@@ -1,3 +1,16 @@
 .page2 {
   color: red;
 }
+
+.test-btn {
+  height: 50px;
+  width: 100px;
+  background-color: red;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+}

examples/children/react16/src/pages/page2/page2.js

@@ -263,6 +263,7 @@ const Page2 = () => {
           </Button>
         </Form.Item>
       </Form>
+      <div className="test-btn">test</div>
     </div>
   );
 };

examples/children/vite/src/pages/page2.vue

@@ -1,9 +1,23 @@
 <template>
   <div>
-    page2
+    <p>page2</p>
+    <div class="test-btn-vite">test</div>
     <router-link to="/">Go to Home</router-link>
   </div>
 </template>
 
 <style>
+.test-btn-vite {
+  height: 50px;
+  width: 100px;
+  background-color: red;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+  margin: 0 auto;
+}
 </style>

examples/children/vue2/src/pages/page2.vue

@@ -58,6 +58,7 @@
         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
       </span>
     </el-dialog>
+    <div class="test-btn">test</div>
   </div>
 </template>
 
@@ -126,4 +127,17 @@ export default {
 .page2 {
   width: 500px;
 }
+
+.test-btn {
+  height: 50px;
+  width: 100px;
+  background-color: red;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bolder;
+}
 </style>

examples/children/vue3/src/main.js

@@ -22,10 +22,12 @@ import App from './App.vue'
 
 let app = null
 let router = null
+let history = null
 // 将渲染操作放入 mount 函数
 function mount () {
+  history = createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || '/micro-app/vue3/')
   router = createRouter({
-    history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || '/micro-app/vue3/'),
+    history,
     routes,
   })
 
@@ -40,8 +42,10 @@ function mount () {
 // 将卸载操作放入 unmount 函数
 function unmount () {
   app.unmount()
+  history.destroy()
   app = null
   router = null
+  history = null
   console.log('微应用child-vue3卸载了')
 }
 

examples/children/vue3/src/pages/page2.vue

@@ -47,6 +47,7 @@
     <router-link to="/">
       <el-button type="primary" plain>返回首页</el-button>
     </router-link>
+    <div class="test-btn">test</div>
   </div>
 </template>
 
@@ -81,4 +82,17 @@
     background: #fff;
     padding: 40px;
   }
+
+  .test-btn {
+    height: 50px;
+    width: 100px;
+    background-color: red;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    font-size: 20px;
+    font-weight: bolder;
+  }
 </style>