[Ionic 2从入门到精通] 2.2 剖析Ionic2项目

现在我们知道了如何安装Ionic 2以及如何生成项目,接下来我打算讲解一下新建项目里包含的那些文件和文件夹的内容。当你创建一个blank Ionic 2应用的时候,你的文件夹结构看起来应该是这样的:

1.2.1.jpg

乍眼一看,好多东西啊 —— 但是需要你去操心的真心没那么多,在简单解释之后你就会明白的。我们将会谈论每个东西是干啥的,但是我还是会从最重要的部分(也就是做项目的时候你需要改动的部分)开始详细讲解,然后顺道讲解一下其他次要部分。

重要的文件和目录

这些文件和目录是你需要频繁用到的,所以明白他们所扮演的角色对你来说非常重要。幸运的是,他们没多少!

src

这里是所有动作的发生地。src文件夹内默认会包含如下内容:

  • app文件夹
  • pages文件夹
  • theme文件夹
  • assets文件夹
  • index.html文件夹

pages文件夹包含了应用所有页面组件。如果打开pages文件夹,你可以看到一个名为home的文件夹。他是一个组件(component),由一个类定义(home.ts),一个模板(home.html),一些样式定义(home.scss)。任何应用的其他页面都会在此有一个对应的文件夹(实际上我们可以交给Ionic CLI帮我们自动生成这些文件),因此,你的项目可能也有loginintrocheckoutabout等等其他文件夹。
theme文件夹包含所有的.scss文件,这些文件用于为应用定义应用级范围的样式。这里面包含了一个共享变量的文件,你可以覆写这些变量,一个全局文件用于存储整个项目的通用样式。后续有一整个部分来讲解如何给Ionic 2应用制定主题,所以我们后续详细探讨。
app文件夹包含了应用的根组件root component,也就是app.module.ts。再一次,根组件将会在后续章节详细探讨,此处暂时略过,实际上,这是整个应用的‘起点’。这里会有一个app.module.ts文件,此处我们用到了Angular 2的@NgModule以用来设置应用的所以依赖,例如我们用到的组件和服务。最后,你会看到main.dev.ts文件和main.prod.ts文件,这是应用的引导启动。dev文件用在开发环境中,prod用在生产环境中。
引导流程只是普通的设置应用的根组件,根组件是第一个创建的组件然后一直使用到最后。
assets目录存储一些应用会用到的静态资源,例如图片,JSON文件。这些资源会在应用编译的时候拷贝到编译文件夹(所以,将素材放在这里非常重要,而不是放到www/assets文件夹)。你可以在此处建立一个文件夹名为images,然后在项目里这样引用assets/images/myImage.png
src/index.html虽然不经常改动,但是你还是可以去改的,与assets一样,他会被拷贝到build目录下面去。
和你的应用默认包含的文件夹一样,当你开始编译你的应用的时候,你将会在这里看到一些其他的文件夹,这个我们后续在讨论。
重要:这里非常重要,如果你还是理解的话请多读几遍。在介绍部分我们说到了webpack,转译,以及其他一些好腻害的ES6特性 —— 重要的一点是需要记住我们用到的ES6和TypeScript特性浏览器不一定支持,所以我们需要将他们‘转译’到ES5代码。当你运行或者编译应用的时候,Ionic将会帮你自动打包好app文件夹下面的所有内容,执行他需要执行的效果,然后全部输出到www文件夹。
当你在浏览器中预览应用的时候,你其实看到的是www文件夹里面打包的版本,而不是你app文件夹里面的内容。同理,当你打包iOS和Android发行版的时候(后续讨论),也是用的www文件夹,而不是app文件夹。不要编辑WWW文件夹里面的代码 —— 你在里面做的变动在编译的时候会被自动覆盖。
使用Angular 2和新ES6语法以为这项目结构和编译流程会稍微复杂,幸运的是Ionic都帮我们搞定了。所以无需担心太多,只需要记在脑海即可。

config.xml

这个文件不需要改动频繁,但是这个文档非常重要。config.xml文件用于高速Cordova如何将你的项目编译到iOS和Android。你可能需要提供一些重要的配置信息,这个我们稍后讨论,你也可以在此定义一些首选项(例如闪屏是否需要自动隐藏,应用是否仅限竖屏,等等)。你只有当你的应用跑着真机上的时候才需要关心这个文件。

不那么重要的东西

很明显,Ionic项目中每个事物的存在都有其存在的道理。但是其中的一些用于更高级用途,这些你可能不需要关心;有一些可能是纯粹的配置,你永远都不要去改动。

配置文件

如果看一下你生成的项目的话你会看到一大堆的配置文件。
除了上面讲过了的 config.xml 之外,你可以完全忽略这些文件。唯一你可能会编辑的文件是 package.json ,他可以用来更新Ionic的版本。

resources

这个文件纯粹是用来放置你编译应用的时候需要用到的闪屏和图标。后续我会给你展示一个更简单的方法利用Ionic CLI来生成这些资源。

hooks

hooks用于应用编译流程的一部分,你可以在这里添加自定义的脚本来跟编译流程的不同部分挂钩。初学者不太需要去碰触着部分的内容,但是如果你想开发更复杂的工作流,例如版本相关或者应用部署相关,你可以在此处创建一些‘hooks'。

node_modules

这是另一个你不需要去碰的文件夹,但是这里是所有好玩意儿存放的地方。如果浏览一下的话你会发现ionic-angularangular2,以及ionicons都在这里。这里是所有项目依赖库的存放点(包括Ionic框架本身)。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容