Skip to main content

脚手架

一旦使用 Ionic CLI 创建了一个应用，下一步就是开始构建功能和组件。应用的大部分内容将会在 src/app/ 目录中开发。

🌐 Once an app is created by the Ionic CLI, the next step is to start building out features and components. The majority of the app will be developed in the src/app/ directory.

项目结构​

🌐 Project Structure

src/
├── app/
├── assets/
├── environments/
├── theme/
├── global.scss
├── index.html
├── main.ts
├── polyfills.ts
├── test.ts
└── zone-flags.ts

src/ 目录包含诸如 index.html 文件、测试的配置文件、用于图片的资源文件夹，以及用于应用代码的主 app/ 目录等项目。

🌐 The src/ directory has items such as the index.html file, configuration files for tests, an asset folder for images, and the main app/ directory for the app's code.

src/
└── app/
    ├── app-routing.module.ts
    ├── app.component.html
    ├── app.component.spec.ts
    ├── app.component.ts
    └── app.module.ts

src/app/ 目录包含根应用组件和模块，以及包含应用功能的其他目录，如页面、组件、服务等。

🌐 The src/app/ directory contains the root app component and module as well as additional directories that contain app features such as pages, components, services, etc.

产生新特性​

🌐 Generating New Features

note

此命令仅在 Ionic Angular 中受支持。

Ionic CLI 可以使用 ionic generate 命令生成新的应用功能。通过在命令行中运行 ionic generate，会显示一个选择提示，其中列出了可生成的功能。

🌐 The Ionic CLI can generate new app features with the ionic generate command. By running ionic generate in the command line, a selection prompt is displayed which lists the available features that can be generated.

$ ionic generate
? What would you like to generate?
❯ page
  component
  service
  module
  class
  directive
  guard

选择完成后，Ionic CLI 会提示输入名称。名称可以是路径，从而便于在有组织的项目结构中生成功能。

🌐 After a selection is made, the Ionic CLI will prompt for a name. The name can be a path, allowing easy generation of features within an organized project structure.

note

允许任何级别的嵌套，例如 portfolio/intro。你可以通过使用 ionic g component "portfolio/intro/About Me" 轻松将组件限定到页面，例如。

$ ionic generate
? What would you like to generate? page
? Name/path of page: portfolio █

或者，可以在命令行中输入生成特性的 type 和 name：

🌐 Alternatively, the type and name of the generated feature can be entered on the command line:

$ ionic g page "User Detail"
> ng generate page "User Detail"
CREATE src/app/user-detail/user-detail.module.ts (564 bytes)
CREATE src/app/user-detail/user-detail.page.scss (0 bytes)
CREATE src/app/user-detail/user-detail.page.html (138 bytes)
CREATE src/app/user-detail/user-detail.page.spec.ts (720 bytes)
CREATE src/app/user-detail/user-detail.page.ts (280 bytes)
UPDATE src/app/app-routing.module.ts (475 bytes)
[OK] Generated page!

Ionic CLI 使用底层框架工具以保持接近最佳实践。对于 @ionic/angular，底层使用的是 Angular CLI。

🌐 The Ionic CLI uses the underlying framework tooling to stay close to best practices. For @ionic/angular, the Angular CLI is used under the hood.

在为新页面创建文件和目录之后，CLI还会更新路由配置以包含新页面。这减少了在保持开发生命周期顺利进行时所需的手动工作量。

🌐 After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving.

有关更多详情，请在命令行中运行 ionic g --help 或参阅 ionic generate 的文档。

🌐 For more details, run ionic g --help from the command line or see the documentation for ionic generate.

目录