Ionic2项目结构解析
本帖最后由 dPary 于 2016-12-14 11:06 编辑创建项目安装好Ionic环境后，运行如下命令创建一个Ionic2项目。ionic start myApp --v2Note:
[*]注意添加“--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如图所示：https://dpary.github.io/assets/article/2016-12-12-ionic-serve.gif关注微信公众号：Ionic2 查看更多教程转载请注明出处：https://dpary.github.io/2016/12/12/Ionic2项目结构解析/
页:
[1]