建立專案

了解如何產生Adobe Experience Manager(AEM)Maven專案，作為與AEM SPA編輯器整合的React應用程式的起點。

目標

使用SPA專案原型產生已啟用AEM編輯器的專案。
將入門專案部署至本機的AEM例項。

您將建置的

在本章中，將根據AEM專案原型產生新的AEM專案。 AEM專案將以React SPA的簡單起點啟動。

什麼是Maven專案？ - Apache Mavenis是用於建立專案的軟體管理工具。所有Adobe Experience Manager實 作都會使用Maven專案，在AEM上建置、管理和部署自訂程式碼。

什麼是Maven原型？ - Maven原型是產生新專案的範本或模式。AEM專案原型可讓我們使用自訂命名空間產生新專案，並包含遵循最佳實務的專案結構，大幅加速我們的專案。

必備條件

查看設定本地開發環境所需的工具和說明。請確定以author模式啟動的新Adobe Experience Manager例項在本機執行。

建立專案

注意

本教學課程使用原型的27版本。使用原型的最新版本產生新專案，一律是最佳作法。

開啟命令行終端並輸入以下Maven命令：
```
mvn -B archetype:generate \
 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=27 \
 -D appTitle="WKND SPA React" \
 -D appId="wknd-spa-react" \
 -D artifactId="aem-guides-wknd-spa.react" \
 -D groupId="com.adobe.aem.guides.wkndspa.react" \
 -D frontendModule="react" \
 -D aemVersion="cloud"
```
注意

如果目標AEM 6.5.5+將aemVersion="cloud"取代為aemVersion="6.5.5"。如果目標為6.4.8+，請使用aemVersion="6.4.8"。

請注意frontendModule=react屬性。這會告訴AEM專案原型以使用要與AEM SPA編輯器搭配使用的起始程式碼基底React程式碼基底引導專案。 appTitle、appId、artifactId和groupId等屬性用於識別專案和用途。

可在此🔗找到用於配置項目的可用屬性的完整清單。

您的本機檔案系統上的Maven原型將產生下列資料夾和檔案結構：

|--- aem-guides-wknd-spa.react/
    |--- all/
    |--- analyse/
    |--- core/
    |--- ui.apps/
    |--- ui.apps.structure/
    |--- ui.config/
    |--- ui.content/
    |--- ui.frontend/
    |--- ui.tests /
    |--- it.tests/
    |--- dispatcher/
    |--- analyse/
    |--- pom.xml
    |--- README.md
    |--- .gitignore

每個資料夾代表個別的Maven模組。在本教學課程中，我們將主要使用ui.frontend模組（即React應用程式）。如需個別模組的詳細資訊，請參閱AEM專案原型檔案。

部署並建置專案

接下來，使用Maven編譯、建置專案程式碼，並將其部署至AEM的本機執行個體。

請確定AEM例項在連接埠4502上本機執行。
從命令行導航到aem-guides-wknd-spa.react項目目錄。
```
$ cd aem-guides-wknd-spa.react
```

執行下列命令以建立整個專案並部署至AEM:

$ mvn clean install -PautoInstallSinglePackage

組建需要約一分鐘的時間，且應會以下列訊息結束：

...
[INFO] ------------------------------------------------------------------------
[INFO] Reactor Summary for aem-guides-wknd-spa.react 1.0.0-SNAPSHOT:
[INFO]
[INFO] aem-guides-wknd-spa.react .......................... SUCCESS [  0.257 s]
[INFO] WKND SPA React - Core .............................. SUCCESS [ 12.553 s]
[INFO] WKND SPA React - UI Frontend ....................... SUCCESS [01:46 min]
[INFO] WKND SPA React - Repository Structure Package ...... SUCCESS [  1.082 s]
[INFO] WKND SPA React - UI apps ........................... SUCCESS [  8.237 s]
[INFO] WKND SPA React - UI content ........................ SUCCESS [  5.633 s]
[INFO] WKND SPA React - UI config ......................... SUCCESS [  0.234 s]
[INFO] WKND SPA React - All ............................... SUCCESS [  0.643 s]
[INFO] WKND SPA React - Integration Tests ................. SUCCESS [ 12.377 s]
[INFO] WKND SPA React - Dispatcher ........................ SUCCESS [  0.066 s]
[INFO] WKND SPA React - UI Tests .......................... SUCCESS [  0.074 s]
[INFO] WKND SPA React - Project Analyser .................. SUCCESS [ 31.287 s]
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------

Maven設定檔autoInstallSinglePackage會編譯專案的個別模組，並將單一套件部署至AEM例項。預設情況下，此包將部署到本地運行在埠4502上且憑據為admin:admin的AEM實例。

導覽至您本機AEM例項上的套件管理器:http://localhost:4502/crx/packmgr/index.jsp。
應該會看到多個包的前置詞為aem-guides-wknd-spa.react。

AEM Package Manager

專案所需的所有自訂程式碼都會整合至這些套件中，並安裝在AEM環境中。

製作內容

接下來，開啟由原型產生的啟動器SPA，並更新部分內容。

導覽至Sites主控台：http://localhost:4502/sites.html/content。

WKND SPA包含基本網站結構，內含國家、語言和首頁。此階層是以language_country和isSingleCountryWebsite的原型預設值為基礎。在產生專案時，可更新可用屬性以覆寫這些值。
通過選擇該頁並按一下菜單欄中的編輯按鈕，開啟us > en > WKND SPA React首頁頁：
已將Text元件新增至頁面。您可以像編輯AEM中的其他元件一樣編輯此元件。
將其他Text元件新增至頁面。

請注意，製作體驗與傳統AEM Sites頁面的類似。目前可使用的元件數目有限。在本教學課程中將新增更多內容。

Inspect單頁應用程式

接下來，使用瀏覽器的開發人員工具確認這是單頁應用程式。

在頁面編輯器中，按一下頁面資訊按鈕> 檢視為已發佈:

這會開啟一個查詢參數?wcmmode=disabled的新索引標籤，有效地關閉AEM編輯器：http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled

檢視頁面的來源，並注意找不到文字內容Hello World或其他任何內容。反之，您應該會看到如下的HTML:

...
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="spa-root"></div>
    <script type="text/javascript" src="/etc.clientlibs/wknd-spa-react/clientlibs/clientlib-react.lc-xxxx-lc.min.js"></script>
</body>
...

clientlib-react.min.js 是載入至頁面並負責轉譯內容的React SPA。

不過，內容來自何處？

返回索引標籤：http://localhost:4502/content/wknd-spa-react/us/en/home.html?wcmmode=disabled
開啟瀏覽器的開發人員工具，並在重新整理期間檢查頁面的網路流量。檢視XHR請求：

應該會有http://localhost:4502/content/wknd-spa-react/us/en.model.json的要求。這包含所有將驅動SPA的內容（以JSON格式）。
在新索引標籤中，開啟http://localhost:4502/content/wknd-spa-react/us/en.model.json

請求en.model.json代表將驅動應用程式的內容模型。 Inspect JSON輸出，您應該能夠找到代表Text元件的程式碼片段。
```
...
":items": {
    "text": {
        "text": "<p>Hello World! Updated content!</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
    "text_98796435": {
        "text": "<p>A new text component.</p>\r\n",
        "richText": true,
        ":type": "wknd-spa-react/components/text"
    },
}
...
```
在下一章中，我們將檢查此JSON內容如何從AEM元件對應至SPA元件，以形成AEM SPA編輯器體驗的基礎。

注意

安裝瀏覽器擴充功能以自動格式化JSON輸出可能會很有幫助。

恭喜！

恭喜，您剛剛建立了第一個AEM SPA Editor專案！

SPA很簡單。在接下來的幾章中，將新增更多功能。

後續步驟

整合SPA — 了解SPA原始碼如何與AEM專案整合，並了解可用來快速開發SPA的工具。

全新的改善搜尋

建立專案

目標

您將建置的

必備條件

建立專案

部署並建置專案

製作內容

Inspect單頁應用程式

恭喜！

後續步驟

Business.Adobe.com資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe