一旦应用程序由 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文件、测试配置文件、图像assets文件夹以及应用代码的主 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 将提示输入名称。名称可以是路径,允许在有组织的项目结构中轻松生成要素。
$ ionic generate
? What would you like to generate? page
? Name/path of page: portfolio █
或者,可以在命令行中输入生成的要素的类型和名称:
$ 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!
为新页面创建文件和目录后,CLI 还将更新路由器配置以包含新页面。这减少了保持开发生命周期运行所需的手动工作量。
查看帮助:
ionic g --help
分享笔记