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

注意

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

¥This command is only supported in 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.

注意

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

¥Any level of nesting is allowed, such as portfolio/intro. You can easily scope components to pages by using ionic g component "portfolio/intro/About Me", for example.

$ 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.

目录