PhoneGap中文网

标题: Ionic2项目结构解析 [打印本页]

作者: dPary 时间: 2016-12-14 11:04
标题: Ionic2项目结构解析
本帖最后由 dPary 于 2016-12-14 11:06 编辑

创建项目

安装好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项目结构解析/

欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)