Skip to content

Commit

Permalink
📝 fix a few details (umijs#1189)
Browse files Browse the repository at this point in the history
Co-authored-by: gongshun <[email protected]>
  • Loading branch information
gongshun and gongshun authored Dec 31, 2020
1 parent 8700bf3 commit e82d80d
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 34 deletions.
6 changes: 2 additions & 4 deletions docs/guide/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ Micro apps are divided into projects with `webpack` and without `webpack`. The t
Note: `publicPath` at runtime and `publicPath` at build time are different, and the two cannot be equivalently substituted.
</Alert>

2. The `history` route needs to set the route `base`, and the value is the same as its `activeRule`. At this time, the `hash` mode does not need to set the route `base` (when the `hash` is used to distinguish micro apps, the `hash` route only need to set the route `base`).
2. It is recommended to use the route of the `history` mode for the micro app. The route `base` needs to be set, and the value is the same as its `activeRule`.
3. Import `public-path.js` at the top of the entry file, modify and export three `lifecycles` functions.
4. Modify the `webpack` configuration to allow cross-domain in development environments and bundle with `umd`.

Expand All @@ -77,7 +77,6 @@ Take the `react 16` project generated by `create react app` as an example, with
2. Set the `base` of `history` mode routing:

```html
<!-- Not required for hash mode -->
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/'}>
```

Expand Down Expand Up @@ -189,7 +188,6 @@ Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it a
function render(props = {}) {
const { container } = props;
router = new VueRouter({
// hash Mode does not need to set base
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
mode: 'history',
routes,
Expand All @@ -202,7 +200,7 @@ Take the `vue 2.x` project generated by `vue-cli 3+` as an example, and add it a
}).$mount(container ? container.querySelector('#app') : '#app');
}
// standalone
// when run independently
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
Expand Down
31 changes: 1 addition & 30 deletions docs/guide/tutorial.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ start();
注意:运行时的 publicPath 和构建时的 publicPath 是不同的,两者不能等价替代。
</Alert>

2. `history` 路由需要设置路由 `base`,值和它的 `activeRule` 是一样的,此时 `hash` 模式无需设置路由 `base`(当使用 `hash` 来区分微应用时,`hash` 路由才需要设置路由 `base`
2. 子应用建议使用 `history` 模式的路由,需要设置路由 `base`,值和它的 `activeRule` 是一样的。
3. 在入口文件最顶部引入 `public-path.js`,修改并导出三个生命周期函数。
4. 修改 `webpack` 打包,允许开发环境跨域和 `umd` 打包。

Expand All @@ -77,7 +77,6 @@ start();
2. 设置 `history` 模式路由的 `base`

```html
<!-- hash 模式不需要 -->
<BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/'}>
```

Expand All @@ -94,16 +93,6 @@ start();
ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}
function storeTest(props) {
props.onGlobalStateChange((value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), true);
props.setGlobalState({
ignore: props.name,
user: {
name: props.name,
},
});
}
if (!window.__POWERED_BY_QIANKUN__) {
render({});
}
Expand All @@ -114,7 +103,6 @@ start();
export async function mount(props) {
console.log('[react16] props from main framework', props);
storeTest(props);
render(props);
}
Expand Down Expand Up @@ -200,7 +188,6 @@ start();
function render(props = {}) {
const { container } = props;
router = new VueRouter({
// hash 模式不需要设置 base
base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
mode: 'history',
routes,
Expand All @@ -218,27 +205,11 @@ start();
render();
}
function storeTest(props) {
props.onGlobalStateChange &&
props.onGlobalStateChange(
(value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),
true,
);
props.setGlobalState &&
props.setGlobalState({
ignore: props.name,
user: {
name: props.name,
},
});
}
export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
storeTest(props); // 测试双向传递数据
render(props);
}
export async function unmount() {
Expand Down

0 comments on commit e82d80d

Please sign in to comment.