前端
目前市面有各种各样的流行框架,早已替代了以往的Jquery,有了NodeJS衍生出了Angular,Vue,React等。
目前来说似乎是Vue最为流行,目前各大公司又有不少都是向React靠拢,还有部分都是因为旧的框架可能还沿用Angular,所以如果能融合这几样框架,那是最好不过了,所以找到了icestark。
官方描述是使用 icestark 构建您的下一个微前端应用,或无痛迁移您目前的巨型应用。如同开发 SPA 应用一样简单,不仅解决多个开发团队协同问题,还带来了安全的沙箱、优秀的性能体验。
再后来又找到了飞冰(iceworks),可以通过VSCode自动拖拉拽生成界面。
推荐使用便携版VSCode:https://github.com/portapps/vscode-portable/releases
目录结构
├── .ice/ # 运行时生成的临时目录
├── build/ # 构建产物目录
├── mock/ # 本地模拟数据
│ ├── index.js
├── public/
│ ├── index.html # 应用入口 HTML
│ └── favicon.png # Favicon
├── src/ # 源码
│ ├── components/ # 自定义业务组件
│ ├── layouts/ # 布局组件
│ ├── pages/ # 页面
│ ├── models/ # 应用级数据状态
│ ├── global.scss # 全局样式
│ ├── config.ts # 环境配置
│ ├── routes.ts # 路由配置
│ └── app.ts # 应用入口
├── build.json
├── package.json
└── tsconfig.json
初始化主应用
# 基于 React 的主应用
$ npm init ice icestark-layout @icedesign/stark-layout-scaffold
# 或者基于 Vue 的主应用
$ npm init ice icestark-layout @vue-materials/icestark-layout-app
$ cd icestark-layout
$ npm install
$ npm start
初始化微应用
# 基于 React 的微应用
$ npm init ice icestark-child @icedesign/stark-child-scaffold
# 基于 Vue 的微应用
$ npm init ice icestark-child @vue-materials/icestark-child-app
$ cd icestark-child
$ npm install
$ npm run start