kazekage605 / alibabacloud-console-os

alibabacloud-console-os

alibabacloud-console-os

介绍

console-os 是在阿里云控制台体系中孵化🐣的微前端方案， 定位是面向企业级的微前端体系化解决方案。

特性

• 📦 开箱即用，无代码侵入
• 📎 完善的微前端体系支撑
• 🕋 完整前端容器沙箱
• ♋️ 多实例兼容

使用文档

子应用

import { mount }  from '@alicloud/console-os-react-portal';
import App from './app';

const appID = 'aliyun-console-slb'

export default mount(
  (props) => <App/>,
  document.getElementById('app'),
  appID
);

宿主应用

import Application from '@alicloud/console-os-react-app'

const appConfigUrl = 'https://dev.g.alicdn.com/aliyun-next/endpoint/0.1.0/aliyun-console-slb.manifest.json';

const Home =  () => (
  <Application
    manifest={appConfigUrl}
    id="aliyun-console-slb"
  />
);
export default Home;

其他框架使用

React

see Console OS React Portal

Vue

see Console OS Vue Portal

Try Example

克隆仓库到本地

git clone https://github.com/aliyun/alibabacloud-console-os.git

安装子应用

$ npm run install:example

运行 React 子应用

$ cd example/SubApp/React
$ npm run start
# you will visit app on http://localhost:8080/

运行 Vue 子应用

$ cd example/SubApp/Vue
$ npm run serve
# you will visit app on http://localhost:8081/

运行 宿主 应用

$ cd example/HostApp/ReactHost
$ npm run start
# you will visit app on http://localhost:3000/

你可以在 http://localhost:3000/ 访问到当前加载的两个子应用。

Try Live Demo

React

• 基础用法

• React 加载 Angular 应用

Angular

• Angular 加载 React 应用

贡献指南

参见贡献指南