Alibaba Cloud Alfa

# Alfa

# 介绍

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

# 特性

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

# 使用文档

子应用

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 = 'http://localhost:7100/aliyun-console-slb.manifest.json';

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

# 其他框架使用

# React

see Alfa React Portal (opens new window)

# Vue

see Alfa Vue Portal (opens new window)

# Try Example

克隆仓库到本地

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

运行 React 子应用

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

运行 Vue 子应用

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

运行 宿主 应用

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

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

# Try Live Demo

# React

# Angular

# Vue

# 贡献指南

参见贡献指南 (opens new window)

快速开始 →