https://juejin.cn/post/6844903977859940360

https://kb.fit2cloud.com/archives/64

https://fusion.design/56717/component/date-picker?themeid=9079

https://blog.csdn.net/qq_24147051/article/details/109726602

开发框架应用
安装 iceworks CLI 工具:

$ npm i -g iceworks

复制代码通过命令行初始化一个框架应用:

$ mkdir icestark-framework-app && cd icestark-framework-app
$ iceworks init @icedesign/stark-layout-scaffold

复制代码完成初始化之后安装依赖然后通过 npm start 即可进行预览。
在 src/App.jsx 中我们可以看到核心的子应用注册代码:

import React from 'react';
import { AppRouter, AppRoute } from '@ice/stark';

export default class App extends React.Component {
  render() {
    return (
      <BasicLayout pathname={pathname}>
        <AppRouter
          onRouteChange={this.handleRouteChange}
          onAppLeave={this.handleAppLeave}
          onAppEnter={this.handleAppEnter}
        >
          <AppRoute
            path="/seller"
            basename="/seller"
            title="商家平台"
            url={[
              '//unpkg.com/icestark-child-seller/build/js/index.js',
              '//unpkg.com/icestark-child-seller/build/css/index.css',
            ]}
          />
          <AppRoute 
            // ...
          />
        </AppRouter>
      </BasicLayout>
    );
  }
}

复制代码子应用注册的核心信息:

{
  // 为子应用分配的基准路由
    path: '/seller',
  // 子应用的 bundle 地址,用来渲染子应用
    url: [
      '//unpkg.com/icestark-child-seller/build/js/index.js',
      '//unpkg.com/icestark-child-seller/build/css/index.css',
    ],
}

复制代码开发子应用
通过命令行初始化子应用:

$ mkdir icestark-child-app-test && cd icestark-child-app-test

基于 React 的子应用

$ iceworks init project @icedesign/stark-child-scaffold

基于 Vue 的子应用

$ iceworks init project @vue-materials/icestark-child-app

复制代码同样安装依赖执行 npm start 即可单独开发预览子应用,如果想在框架应用中预览,替换相关 bundle 地址即可。
相比于传统的单页面应用,icestark 的子应用有三个需要定制的地方:

需要主动注册&触发应用的卸载事件
应用渲染的节点需要通过 getMountNode() API 来获取

// src/index.jsx
import ReactDOM from 'react-dom';
import { getMountNode, registerAppLeave } from '@ice/stark-app';
import router from './router';

registerAppLeave(() => {
  ReactDOM.unmountComponentAtNode(mountNode);
});

ReactDOM.render(router(), getMountNode(document.getElementById('mountNode')));

复制代码
路由需要定义在约定的基准路由下面:


// src/router.jsx
import { BrowserRouter as Router, Switch } from 'react-router-dom';
import { getBasename } from '@ice/stark-app';

export default () => {
  return (
    <Router basename={getBasename()}>
      <Switch>
        // ...
      </Switch>
    </Router>
  );
};
文档更新时间: 2022-04-29 13:19   作者:admin