分享程序网
首页
  • java
微服务
微前端
环境搭建
数据库
设计模式
算法
软件
解决问题
链接
首页
  • java
微服务
微前端
环境搭建
数据库
设计模式
算法
软件
解决问题
链接
  • 微前端

    • 前端

前端

目前市面有各种各样的流行框架,早已替代了以往的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
Last Updated:
Contributors: clcheng