feat: 修改注释

README.md

@@ -14,9 +14,6 @@
   <a href="https://github.com/micro-zoe/micro-app/blob/master/LICENSE">
     <img src="https://img.shields.io/npm/l/@micro-zoe/micro-app.svg" alt="license"/>
   </a>
-  <a href="https://makeapullrequest.com/">
-    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=blue" alt="PRs-welcome"/>
-  </a>
   <a href="https://gitter.im/zoe-community/zoe-room">
     <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
   </a>
@@ -38,7 +35,7 @@ It is the lowest cost framework for accessing micro front-end, and provides a se
 The micro-app has nothing to do with the technology stack, nor is it tied to the business, and can be used in any front-end framework.
 
 # Getting Start
-The micro front-end is divided into base application and sub application. We list the modifications required for base application and sub application respectively, and introduce the use of micro-app in detail.
+The micro front-end is divided into base application and micro application. We list the modifications required for base application and micro application respectively, and introduce the use of micro-app in detail.
 
 ## base application
 > The base application takes the vue framework as an example
@@ -56,7 +53,7 @@ import microApp from '@micro-zoe/micro-app'
 microApp.start()
 ```
 
-3、Assign a route to the sub application
+3、Assign a route to the micro application
 ```js
 // router.js
 import Vue from 'vue'
@@ -82,27 +79,27 @@ export default routes
 <!-- my-page.vue -->
 <template>
   <div>
-    <h1>sub application</h1>
+    <h1>micro application</h1>
     <!-- name is the application name, globally unique, url is the html address -->
     <micro-app name='app1' url='http://localhost:3000/' baseurl='/my-page'></micro-app>
   </div>
 </template>
 ```
 
-> Please refer to [Routing Chapter](https://zeroing.jd.com/micro-app/docs.html#/zh-cn/route) for the relationship between url and sub application routing
+> Please refer to [Routing Chapter](https://zeroing.jd.com/micro-app/docs.html#/zh-cn/route) for the relationship between url and micro application routing
 
-## sub application
-> The sub application takes the react framework as an example
+## micro application
+> The micro application takes the react framework as an example
 
-1、Add basename for route
+1、Add basename for route(If the base application is history route and the micro application is hash route, it is not necessary to set the baseurl, this step can be skipped)
 
 ```js
 // router.js
 import { BrowserRouter, Switch, Route } from 'react-router-dom'
 
 export default function AppRoute () {
   return (
-    // 👇 the sub application can get the baseurl issued by the base application through window.__MICRO_APP_BASE_URL__
+    // 👇 the micro application can get the baseurl issued by the base application through window.__MICRO_APP_BASE_URL__
     <BrowserRouter basename={window.__MICRO_APP_BASE_URL__ || '/'}>
       <Switch>
         ...
@@ -121,11 +118,11 @@ devServer: {
 },
 ```
 
-Then micro front-end can be rendered normally, and the react sub application is embedded in the vue base application. The effect is as follows：
+Then micro front-end can be rendered normally, and the react micro application is embedded in the vue base application. The effect is as follows：
 
 ![image](https://img10.360buyimg.com/imagetools/jfs/t1/188373/14/17696/41854/6111f4a0E532736ba/4b86f4f8e2044519.png)
 
-The above lists the usage of react and Vue framework. They can be combined freely. For example, the base application is react, the sub application is Vue, or the base application is Vue, the sub application is react, or both the base application and the sub application are react and Vue. The micro-app has no restrictions on the front-end framework, and any framework can be used as a base application to embed any type of sub application of the framework.
+The above lists the usage of react and Vue framework. They can be combined freely. For example, the base application is react, the micro application is Vue, or the base application is Vue, the micro application is react, or both the base application and the micro application are react and Vue. The micro-app has no restrictions on the front-end framework, and any framework can be used as a base application to embed any type of micro application of the framework.
 
 More detailed configuration can be viewed [Official website document](https://zeroing.jd.com/micro-app/docs.html#/zh-cn/start).
 
@@ -173,7 +170,7 @@ The react base application is started by default. If you want to start the vue b
 </details>
 
 <details>
-  <summary>Must sub applications support cross-domain?</summary>
+  <summary>Must micro applications support cross-domain?</summary>
   yes!
 
   If it is a development environment, you can set headers in webpack-dev-server to support cross-domain.

README.zh-cn.md

@@ -14,9 +14,6 @@
   <a href="https://github.com/micro-zoe/micro-app/blob/master/LICENSE">
     <img src="https://img.shields.io/npm/l/@micro-zoe/micro-app.svg" alt="license"/>
   </a>
-  <a href="https://makeapullrequest.com/">
-    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?color=blue" alt="PRs-welcome"/>
-  </a>
   <a href="https://gitter.im/zoe-community/zoe-room">
     <img src="https://badges.gitter.im/Join%20Chat.svg" alt="gitter">
   </a>
@@ -95,7 +92,7 @@ export default routes
 ## 子应用
 > 子应用以react框架为例
 
-1、添加路由前缀
+1、添加路由前缀(如果基座应用是history路由，子应用是hash路由，不需要设置路由前缀，这一步可以省略)
 
 ```js
 // router.js

docs/index.html

@@ -25,7 +25,7 @@
         <nav class='header-nav'>
           <a class='header-nav-title' href="./docs.html">文档</a>
           <a class='header-nav-title' href="/micro-app/demo/" target="blank">示例</a>
-          <a class='header-nav-title' href="https://github.com/micro-zoe/micro-app" target="blank"><img class='github-icon' src="https://github.com/favicon.ico" alt=""></a>
+          <a class='header-nav-title' href="https://github.com/micro-zoe/micro-app" target="blank"><img class='github-icon' src="./home/assets/github-logo.png" alt="github"></a>
         </nav>
       </header>
       <section class='introduce'>

docs/zh-cn/prefetch.md

@@ -12,7 +12,6 @@ app: {
   disableScopecss?: boolean // 是否关闭样式隔离，非必传
   disableSandbox?: boolean // 是否关闭沙盒，非必传
   macro?: boolean // 是否以宏任务方式绑定元素作用域，非必传
-  shadowDOM?: boolean // 是否开启shadowDOM，非必传
 }
 ```
 
@@ -42,5 +41,6 @@ microApp.start({
 ```
 
 > [!NOTE]
-> 预加载入参：`disableScopecss`、`disableSandbox`、`macro`、`shadowDOM` 必须和 `<micro-app>`[配置项](/zh-cn/configure)保持一致。如果产生冲突，以先执行的一方为准。
+> 1、预加载入参：`disableScopecss`、`disableSandbox`、`macro` 必须和 `<micro-app>`[配置项](/zh-cn/configure)保持一致。如果产生冲突，以先执行的一方为准。
 > 
+> 2、如果子应用开启了shadowDOM，则预加载中的`disableScopecss`需要设置为true

docs/zh-cn/route.md

@@ -3,7 +3,7 @@
 ### url属性和子应用路由的关系
 答：没有关系！
 
-micro-app的url属性指向html的地址，它只是用来获取html，不会对子应用产生影响。
+micro-app的url属性指向html的地址，它只是用来获取html。
 
 基座应用和子应用本质是在同一个页面渲染，所以影响到子应用路由的是浏览器地址。
 
@@ -13,7 +13,7 @@ micro-app的url属性指向html的地址，它只是用来获取html，不会对
 
 基座应用会匹配`page1`并渲染对应的组件，子应用也是一样，浏览器地址会同时影响到基座应用和子应用，因为每个应用都有一套自己的路由系统，它们是可以共存的，不会冲突。
 
-此时我们要渲染子应用`http://www.xxx.com/`的`page1`页面，那么url属性填写的不是`http://www.xxx.com/page1/`，而是`http://www.xxx.com/`。
+此时我们要渲染子应用`http://www.xxx.com/`的`page1`页面，那么url属性填写的是`http://www.xxx.com/`，而不是`http://www.xxx.com/page1/`。
 
 ```html
 // http://www.xxx.com/ 会兜底到 http://www.xxx.com/index.html
@@ -23,15 +23,27 @@ micro-app的url属性指向html的地址，它只是用来获取html，不会对
 
 ### 路由配置
 
-如果子应用是单页面应用，那么不需要关心路由的问题。
-
-如果是子应用多页面，需要正确配置路由，否则容易出错，以下是需要注意的点：
+路由配置非常容易出问题，下面列出了一些注意点：
 
+**路由类型**
 - 1、基座是hash路由，子应用也必须是hash路由
 - 2、基座是history路由，子应用可以是hash或history路由
-- 3、基座路由匹配的path不能使用严格匹配
-- 4、子应用根据基座路由分配的path添加路由前缀
-- 5、如果基座是history路由，子应用是hash路由，不需要设置路由前缀
+
+**路由前缀(baseurl)**
+- 1、如果基座是history路由，子应用是hash路由，不需要设置路由前缀
+- 2、vue-router在hash模式下不支持置base添加路由前缀，需要创建一个空的路由页面，将其它路由作为它的children
+
+```js
+const routes = [
+    {
+      path: window.__MICRO_APP_BASE_URL__ || '/',
+      component: Home,
+      children: [
+        // 其他的路由都写到这里
+      ],
+    },
+]
+```
 
 **示例**
 

docs/zh-cn/start.md

@@ -96,7 +96,7 @@ export function MyPage () {
 
 ### 子应用
 
-1、添加路由前缀
+1、添加路由前缀(如果基座应用是history路由，子应用是hash路由，不需要设置路由前缀，这一步可以省略)
 
 <!-- tabs:start -->
 

examples/children/react16/src/router.js

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from 'react'
-import { BrowserRouter, Switch, Route, Redirect, Link } from 'react-router-dom'
+import { BrowserRouter, Switch, Route, Redirect, Link, HashRouter } from 'react-router-dom'
 import Page1 from './pages/page1/page1'
 import { Menu } from 'antd';
 import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';

examples/children/vite/vite.config.js

@@ -35,5 +35,5 @@ export default defineConfig({
     outDir: 'vite',
   },
   clearScreen: false,
-  base: `${process.env.NODE_ENV === 'production' ? 'https://cangdu.org' : ''}/micro-app/vite/`,
+  base: `${process.env.NODE_ENV === 'production' ? 'https://zeroing.jd.com' : ''}/micro-app/vite/`,
 })

examples/children/vue2/src/main.js

@@ -11,16 +11,10 @@ import App from './App.vue'
 Vue.config.productionTip = false
 Vue.use(ElementUI)
 
-
-function getBaseName () {
-  // 基座是history路由，子应用是hash路由，不需要设置路由前缀
-  return '/'
-}
-
 const router = new VueRouter({
-  options: {
-    base: getBaseName(),
-  },
+  // vue-router在hash模式下不支持base，可以用一个根页面进行包裹
+  // base: window.__MICRO_APP_BASE_URL__ || '/',
+  // mode: 'history',
   routes,
 })
 

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

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Root',
+}
+</script>

examples/children/vue2/src/router.js

@@ -1,19 +1,29 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import Root from './pages/root.vue';
 import Home from './pages/page1.vue';
 
 Vue.use(VueRouter);
 
 const routes = [
   {
+    // 因为vue-router在hash模式下无法设置base，如果基座和子应用都是hash路由，需要创建一个空的路由页面作为根页面，用于设置路由前缀
+    // 如果基座应用是history模式则不需要使用root组件包裹
+    // path: window.__MICRO_APP_BASE_URL__ || '/',
     path: '/',
-    name: 'home',
-    component: Home,
-  },
-  {
-    path: '/page2',
-    name: 'page2',
-    component: () => import(/* webpackChunkName: "page2" */ './pages/page2.vue'),
+    component: Root,
+    children: [
+      {
+        path: '/',
+        name: 'home',
+        component: Home,
+      },
+      {
+        path: '/page2',
+        name: 'page2',
+        component: () => import(/* webpackChunkName: "page2" */ './pages/page2.vue'),
+      },
+    ],
   },
 ];
 

examples/children/vue3/src/router.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
 import Home from './pages/page1.vue';
 
 const routes = createRouter({

examples/main-vue2/src/pages/vue2.vue

@@ -2,12 +2,12 @@
   <div class="vue2">
     <el-button type="primary" round @click='changeData'>发送数据</el-button>
     <micro-app
-        name='vue2'
-        url='http://localhost:4001/micro-app/vue2'
-        :data='data'
-      >
-      <!-- destory inline scopecss -->
-      </micro-app>
+      name='vue2'
+      url='http://localhost:4001/micro-app/vue2'
+      :data='data'
+    >
+    <!-- destory inline scopecss  baseurl='/vue2' -->
+    </micro-app>
   </div>
 </template>
 

src/constants.ts

@@ -3,7 +3,7 @@ export enum ObservedAttrName {
   URL = 'url',
 }
 
-// 应用状态
+// app status
 export enum appStatus {
   NOT_LOADED = 'NOT_LOADED',
   LOADING_SOURCE_CODE = 'LOADING_SOURCE_CODE',
@@ -14,7 +14,7 @@ export enum appStatus {
   UNMOUNT = 'UNMOUNT',
 }
 
-// 生命周期
+// lifecycles
 export enum lifeCycles {
   CREATED = 'created',
   BEFOREMOUNT = 'beforemount',