Ionic2项目结构解析

dPary

创建项目

安装好ionic环境后，运行如下命令创建一个Ionic2项目。

ionic start myApp --v2

Note:

• 注意添加“--v2”，否则创建的是Ionic1的项目；
• 创建过程中会执行“npm install”，安装项目的依赖文件，此处应使用梯子或者淘宝镜像（cnpm）；
• Ionic提供了三种初始模版，即：tabs、sidemenu、blank，不加模版名时默认创建tabs项目。

  ionic start myApp --v2 tabs //使用tabs模版创建Ionic2项目
  ionic start myApp --v2 tabs //使用sidemenu模版创建Ionic2项目
  ionic start myApp --v2 tabs //创建空白的Ionic2项目

  
  

项目目录

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

myApp │  config.xml  //项目配置文件，包名、名称、minSdkVersion等都在此处配置 │  ionic.config.json │  package.json  //项目依赖文件列表 │  tsconfig.json │  tslint.json │   ├─hooks │       ├─node_modules  //项目依赖文件 │                   ├─platforms  //项目添加的平台 ├─resources  //项目图标 │  │  icon.png  //安装应用后桌面图标 │  │  splash.png  //打开APP后的闪屏图片 │  │   │  ├─android │  │  ├─icon │  │  └─splash │  │          │  └─ios │      ├─icon │      └─splash │               ├─src  //项目路径，在此编辑自己的项目 │  │  declarations.d.ts │  │  index.html  //项目入口 │  │  manifest.json │  │  service-worker.js │  │   │  ├─app │  │      app.component.ts  //初始化项目，定义rootPage │  │      app.module.ts  //项目中所有的module都要在次声明 │  │      app.scss  //全局样式表 │  │      main.dev.ts │  │      main.prod.ts │  │       │  ├─assets  //资源文件，可将图片资源放于此处 │  │          │  ├─pages  //项目页面 │  │  ├─about │  │  │       │  │  ├─contact │  │  │       │  │  ├─home │  │  │      home.html  //.html │  │  │      home.scss  //.scss 样式代码 │  │  │      home.ts  //.ts 逻辑代码 │  │  │       │  │  └─tabs │  │          tabs.html │  │          tabs.ts │  │          │  └─theme  //项目主题，比如可以定义所有页面的背景色$background-color │          variables.scss │          └─www  //编译后的项目会保存在这里

运行项目

ionic serve

如图所示：

关注微信公众号：Ionic2 查看更多教程

转载请注明出处：https://dpary.github.io/2016/12/12/Ionic2项目结构解析/