快速设置

快速设置是一个快速的演练步骤，用于说明如何安装和运行WKND应用程序并作为远程SPA，以及如何使用AEM SPA Editor创作它。

快速设置会直接将您转到本教程的结束状态。

快速设置的视频演示

前提条件

本教程需要满足以下条件：

本教程假定：

  • Microsoft® Visual Studio代 码作为IDE
  • ~/Code/wknd-app的工作目录
  • 在http://localhost:4502上作为创作服务运行AEM SDK
  • 使用本地admin帐户运行密码为admin的AEM SDK
  • 在http://localhost:3000上运行SPA

启动AEM SDK快速启动

在端口4502上下载并安装AEM SDK快速启动，默认为admin/admin凭据。

  1. 下载最新的AEM SDK

  2. 将AEM SDK解压缩到~/aem-sdk

  3. 运行AEM SDK快速入门Jar

    $ java -jar aem-sdk-quickstart-xxx.jar

# Provide `admin` as the admin user's password

AEM SDK将在http://localhost:4502上启动并自动启动。 使用以下凭据登录：

  • 用户名: admin
  • 密码: admin

下载并安装WKND站点包

本教程依赖于​WKND 0.3.0+的​项目（对于内容）。

  1. 下载最新版本的 aem-guides-wknd.all.x.x.x.zip
  2. 使用admin凭据在http://localhost:4502/crx/packmgr登录AEM SDK的包管理器。
  3. ____ 上载 aem-guides-wknd.all.x.x.x.zip 步骤1中下载的
  4. 点按​Install​按钮，查看aem-guides-wknd.all-x.x.x.zip条目

下载并安装WKND应用程序SPA包

要执行快速设置，将提供AEM包，其中包含教程的最终AEM配置和内容。

  1. 下载
  2. 下载
  3. 使用admin凭据在http://localhost:4502/crx/packmgr登录AEM SDK的包管理器。
  4. ____ 上载 wknd-app.all.x.x.x.zip 步骤1中下载的
  5. 点按​Install​按钮，查看wknd-app.all.x.x.x.zip条目
  6. ____ 上载 wknd-app.ui.content.sample.x.x.x.zip 步骤2中下载的
  7. 点按​Install​按钮，查看wknd-app.ui.content.sample.x.x.x.zip条目

下载WKND应用程序源

从Github.com下载WKND应用程序的源代码，然后将包含对本教程中所执行的SPA所做更改的分支切换为。

$ mkdir -p ~/Code/wknd-app
$ cd ~/Code/wknd-app
$ git clone --branch feature/spa-editor https://github.com/adobe/aem-guides-wknd-graphql.git
$ cd aem-guides-wknd-graphql

启动SPA应用程序

从项目的根中，安装SPA项目npm依赖项并运行应用程序。

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ npm install
$ npm run start

如果运行npm install时出错，请尝试以下步骤：

$ cd ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
$ rm -f package-lock.json
$ npm install --legacy-peer-deps
$ npm run start

验证SPA是否在http://localhost:3000运行。

在AEM SPA编辑器中创作内容

创作内容之前，请先排列浏览器窗口，使AEM创作(http://localhost:4502)位于左侧，远程SPA(http://localhost:3000)在右侧运行。 此安排允许您查看AEM源内容的更改如何立即反映在SPA中。

  1. 登录到AEM SDK创作服务作为admin
  2. 导航至​站点> WKND应用程序>使用> en
  3. 编辑​WKND应用程序主页
  4. 切换到​编辑​模式

创作主页视图的固定组件

  1. 点按文本​WKND Adventures​以激活固定的标题组件(硬编码到SPA主页视图中)
  2. 点按标题组件操作栏上的​扳手​图标
  3. 更改标题组件的内容并保存
  4. 刷新http://localhost:3000上运行的SPA，并查看所反映的更改

创作主页视图的容器组件

  1. 仍在编辑​WKND应用程序主页​时……
  2. 展开​SPA Editor的侧栏（左侧）
  3. 点按​组件​图标
  4. 在WKND徽标下方和固定标题组件上方的容器组件中添加、更改或删除组件
  5. 刷新http://localhost:3000上运行的SPA，并查看所反映的更改

在动态路由上创作容器组件

  1. 在SPA编辑器中切换到​预览​模式
  2. 点按​Bali Surf Camp​卡，然后导航到其动态路由
  3. 在位于​Itrinal​标题上方的容器组件中添加、更改或删除组件
  4. 刷新http://localhost:3000上运行的SPA，并查看所反映的更改

WKND应用程序主页> Adventure 下的新AEM页面必须​具有与相应冒险内容片段名称匹配的AEM页面名称。 这是因为SPA到AEM页面的路由映射基于路由的最后一段，即内容片段的名称。

恭喜！

您只需快速了解AEM SPA Editor如何通过可控的可编辑区域来增强您的SPA! 如果您感兴趣 — 请查看本教程的其余部分，但请确保重新开始，因为在此快速设置中，您的本地开发环境现在处于教程的结束状态！

在此页面上