IONIC--项目目录结构

超、凢脫俗 2022-05-10 05:10 249阅读 0赞

原[https://blog.csdn.net/sinat\_28597179/article/details/79094235][https_blog.csdn.net_sinat_28597179_article_details_79094235]

### 开发工具--Visual Studio Code ###

[https://code.visualstudio.com/][https_code.visualstudio.com]

点击打开文件夹--打开创建的app的目录可查看目录结构

![SouthEast][]

### ionic目录结构 ###

主要是看SRC目录：（其他作为了解）

![SouthEast 1][]

![SouthEast 2][]

pages中about、content、home目录下的html就是app显示的html；<ion-title>--标题，<ion-content>--内容

### \*app--app.module.ts ###

/**根模块--告诉ionic如何组装应用 */
    //引入ionic、angular的系统模块
    import { NgModule,ErrorHandler }from'@angular/core';
    import { BrowserModule }from'@angular/platform-browser';
    import { IonicApp,IonicModule,IonicErrorHandler }from'ionic-angular';
    
    //引入根组件
    import { MyApp }from'./app.component';
    
    //引入自定义的组件(页面)
    import { AboutPage }from'../pages/about/about';
    import { ContactPage }from'../pages/contact/contact';
    import { HomePage }from'../pages/home/home';
    import { TabsPage }from'../pages/tabs/tabs';
    
    //打包成app后配置启动画面、导航条等的服务--忽略
    import { StatusBar }from'@ionic-native/status-bar';
    import { SplashScreen }from'@ionic-native/splash-screen';
    @NgModule({
        declarations: [//声明组件
            MyApp,
            AboutPage,
            ContactPage,
            HomePage,
            TabsPage
        ],
        imports: [//引入的模块（依赖的模块）
            BrowserModule,
            IonicModule.forRoot(MyApp)
        ],
        bootstrap: [IonicApp],//启动模块
        entryComponents: [//配置不会在模板中使用的组件
            MyApp,
            AboutPage,
            ContactPage,
            HomePage,
            TabsPage
        ],
        providers: [//配置服务
            StatusBar,
            SplashScreen,
            {provide: ErrorHandler,useClass:IonicErrorHandler}
        ]
    })
    
    export classAppModule {}

[https_blog.csdn.net_sinat_28597179_article_details_79094235]: https://blog.csdn.net/sinat_28597179/article/details/79094235
[https_code.visualstudio.com]: http://code.visualstudio.com/
[SouthEast]: /images/20220510/b2bf1bdc1bca42ee985968ab14d53b67.png
[SouthEast 1]: /images/20220510/f0ea13e34313424792248039f14bfdf3.png
[SouthEast 2]: /images/20220510/e7a44072f9e94fdb858344e9841358bb.png