腳手架

一旦使用 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/About Me"，輕鬆地將元件範圍設定為頁面。

$ 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 的文件。