脚手架

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

项目结构

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

src/ 目录包含诸如 index.html 文件、测试的配置文件、用于图像的资产文件夹以及用于应用程序代码的主要 app/ 目录。

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

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

生成新功能

注意

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

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

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

做出选择后，Ionic CLI 将提示您输入名称。名称可以是路径，允许在组织良好的项目结构中轻松生成功能。

注意

允许任何级别的嵌套，例如 portfolio/intro。例如，您可以通过使用 ionic g component "portfolio/intro/关于我" 来轻松地将组件范围限定为页面。

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

或者，您可以在命令行中输入要生成的功能的 type 和 name

$ 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 是幕后使用的。

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

有关更多详细信息，请在命令行中运行 ionic g --help，或查看 ionic generate 的文档。