Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📝 fix a few details #1189

Merged
merged 1 commit into from Dec 31, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 2 additions & 4 deletions docs/guide/tutorial.md
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
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