クイックスタートマイクロフロントエンドフレームワークicestark（1）

オファーが届きました。友達を掘って受け取りましょう！私は2022年春の採用チェックインイベントに参加しています。クリックしてイベントの詳細を表示します。

考える

マイクロフロントエンドの設計哲学とは何ですか？それはどのような問題を解決しますか？

マイクロフロントエンドの本質は、バックエンドマイクロサービスの本質と同じです。マイクロフロントエンドソリューションには、通常、次の機能が含まれています。

システムの運用経験を保証することで、各マイクロアプリケーションの独自開発・リリースを実現
さまざまなサブアプリケーションの統合管理
相互に通信し、アプリケーション間でページを切り替える機能を提供します

icestarkメインアプリケーションの初期化

メインのVueアプリを初期化します

npm init ice icestark-layout @vue-materials/icestark-layout-app
复制代码

メインのReactアプリケーションを初期化します

npm init ice icestark-layout @icedesign/stark-layout-scaffold
复制代码

ローカルインスタンスによって初期化されたVueメインアプリケーションは、次のように実行されます

cd icestark-layout
npm install

# 注意 Vue 主应用运行 `dev`
npm run dev
# React 主应用运行 `start`
npm run start
复制代码

ローカルアドレス：http：// localhost：3000

ローカルで実行される公式のメインアプリケーションDemoは、公式に提供されたVueおよびReactサブアプリケーションを統合しました。次に、ローカルでサブアプリケーションを作成し、実行後にローカルで開始されたメインアプリケーションにハングアップします。

icestarkサブアプリケーションを作成する

Vueサブアプリ

npm init ice icestark-child-vue @vue-materials/icestark-child-app
复制代码

Vueサブアプリを実行する

cd icestark-child-vue
npm i
npm run dev
复制代码

ローカルアドレス：http：// localhost：3001

Reactサブアプリ

npm init ice icestark-child @icedesign/stark-child-scaffold
复制代码

Reactサブアプリを実行します

cd icestark-child
npm i
npm run start
复制代码

ローカルアドレス：http：// localhost：3333

ネイティブアプリの統合

サブアプリケーションをメインアプリケーションApp.vueにonMounted登録し、メインアプリケーションの氷登録構成を変更して、name, activePath, title, entryこれら4つのプロパティを変更します。

app file.png

注： activePathサブアプリケーションのルーティングアドレスをポイントします。ここでのアドレスは、サブアプリケーションの開始後にルートルーティングアドレスを使用するか、 http：//entryなどの対応するサブアプリケーションの指定されたアドレスをポイントできます。 localhost：3333 / react