在<a0/SPA>中建AEM立您的第一個React

歡迎使用專為 Adobe Experience Manager (AEM) 中 SPA Editor 功能的新手開發人員設計的多部分教學課程。本教學課程將逐步介紹虛擬生活品牌WKND的React應用程式實作。 React應用程式將會開發並設計為與Editor一起部AEM署,SPA Editor會將React元件對應至AEM元件。 部署至 AEM 的完成 SPA 即可使用 AEM 傳統的內嵌編輯工具動態製作。

實作的最終 SPA

WKND SPA 實作

關於

本多部分教學課程的目的,是教導開發人員如何實作React應用程式,以搭配SPAEditor功能AEM。 在真實世界情況中,開發活動會依人員細分,常涉及​前端開發人員​和​後端開發人員。我們認為任何將參與 AEM SPA Editor 專案的任一開發人員在完成此教學課程後,將獲益良多。

此教學課程在設計上將使用 AEM as a Cloud Service,並向下相容於 AEM 6.5.4+AEM 6.4.8+。使用以下項目實作 SPA:

預計約需 1-2 小時完成教學課程的每個部份。

最新的程式碼

您可以在 GitHub 上找到教學課程的所有程式碼。

最新的程式碼基底可以當做可下載的 AEM 套件使用。

必備條件

開始進行此教學課程前,您需要具備以下條件:

雖然不一定需要,但對於開發傳統的 AEM Sites 元件有基本的了解也會有幫助。

本機開發環境

本機開發環境是完成此教學課程所不可或缺的條件。螢幕擷圖和影片都是使用在 Mac OS 環境上執行的 AEM as a Cloud Service SDK 擷取,並將 Visual Studio Code 當做 IDE 使用。除非另有註明,否則命令和程式碼應獨立於本機作業系統。

注意

AEM as a Cloud Service 的新手嗎? 請參閱以下指南以使用 AEM as a Cloud Service SDK 設定本機開發環境

AEM 6.5 的新手嗎? 請參閱以下指南以設定本機開發環境

後續步驟

您還在等什麼?!請瀏覽至 SPA Editor 專案章節,開始進行此教學課程並了解如何使用 AEM Project Archetype 產生啟用 SPA Editor 的專案。

向下相容性

此教學課程的專案程式碼是針對 AEM as a Cloud Service 所建置。為了使項目代碼向後相容​6.5.4+​和​6.4.8+,對教程的POM檔案進行了幾項修改。

The UberJar v6.4.4 已當做相依性納入:

<!-- Adobe AEM 6.x Dependencies -->
<dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>uber-jar</artifactId>
    <version>6.4.4</version>
    <classifier>apis</classifier>
    <scope>provided</scope>
</dependency>

已新增名為 classic 的其他 Maven 描述,以修改組建並將 AEM 6.x 環境做為目標:

  <!-- AEM 6.x Profile to include Core Components-->
    <profile>
        <id>classic</id>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
        <build>
        ...
    </profile>

classic 描述檔預設為停用。如果遵循教學課程AEM6.x,請在指示執行Maven組建時新增classic描述檔,例如:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

產生 AEM 實作的新專案時,物閉使用最新版本的 AEM Project Archetype 並更新 aemVersion,以將您預期的 AEM 版本做為目標。

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now