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