修改默认应用

更新index.html文件

在上一步中，您使用该create-lwc-app 工具创建了样板应用程序。在此步骤中，您将修改默认应用程序并将其变成会议管理应用程序。

您可以使用自己喜欢的代码编辑器完成此项目。我们建议使用 Visual Studio Code，但这不是必需的。我们以VS Code为将来的指示。

1. 打开Visual Studio代码。
2. 在菜单中选择文件>打开。
3. 选择您的conference-app文件夹，然后单击“打开”。

Visual Studio Code中的会议应用程序视图

在VS Code文件资源管理器中，展开src文件夹，然后展开client文件夹。
打开该index.html文件。

将现有内容替换为以下HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Lightning Conference</title>
    <style>
      body {
        font-family: Helvetica, Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
    </style>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="shortcut icon" href="/resources/favicon.ico" />
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>

保存的index.html文件。

在此新版本中，您更改了页面标题和嵌入式CSS以支持我们应用程序的要求。在div与IDmain为您的应用程序使用了JavaScript中的入口点index.js文件使用追加了第一个Web组件createElement来创建组件。

import { createElement } from 'lwc';
import MyApp from 'my/app';
const app = createElement('my-app', { is: MyApp });
document.querySelector('#main').appendChild(app);

<my-app>是表示我们第一个Web组件的自定义元素：my是映射到文件系统上我的文件夹的名称空间，并且app是Web组件名称。所述appWeb组件被用作应用程序的容器。

修改应用程序Web组件

让我们修改 app Web组件以显示会议管理应用程序的标题。该组件可协调应用程序中的所有事件和数据。

在VS代码文件浏览器中，展开app文件夹下src/client/modules/my。该文件夹包含组成Lightning Web组件的三个文件：一个html文件（模板），一个js文件（类定义）和一个css文件（样式）。
打开该app.html文件。

用以下标记替换现有内容：

<template>
  <header>
    <img src="resources/lwc.png" alt="App logo">
    <h2>Lightning Conference</h2>
  </header>
  <main class="content">
    <!-- Add components here -->
  </main>
</template>

该 <template> 标签是定制元素说明书的一部分，包括用于网络组件的HTML标记。

保存的app.html文件。

设置Web组件的样式

闪电Web组件的样式看起来最好。打开文件app.css。

用以下样式替换现有内容：

.content {
  padding: 0 3rem;
}
header {
  padding: 1rem;
  display: flex;
  color: #ffffff;
  background: #0288d1;
  box-shadow: 0 4px 3px rgba(1, 87, 155, 0.5);
  align-items: center;
}
header img {
  height: 3rem;
  margin-right: 0.3rem;
}
header h2 {
  font-size: 1.75rem;
  font-weight: 300;
}

保存的app.css文件。

返回浏览器窗口以查看更改。该应用程序应如下所示：

在本地运行的Lightning Conference应用程序的视图。

注意

如果您看不到更改，则可能已watch在命令行上终止了该过程。在这种情况下，请返回命令行，确保您位于正确的文件夹（conference-app）中，然后键入：npm run watch。打开浏览器窗口，然后导航到 Mac的http：// localhost：3001或 Windows的http://0.0.0.0:3001来访问您的应用程序。

做得好！您修改了默认的“应用程序” Web组件，并准备好主持会议应用程序。在下一步中，您将创建用于检索会议会话的数据服务。

修改默认应用

注意

你可能也会喜欢...

使用Lightning Web Components开源构建您的第一个应用程序 – 创建会话详细信息Web组件

使用Lightning Web Components开源构建您的第一个应用程序 – 创建数据服务模块

使用Lightning Web Components开源构建您的第一个应用程序 创建应用程序

使用Lightning Web Components开源构建您的第一个应用程序创建应用程序