首先，需要创建一个项目，作为一个计算机专业毕业的程序员，没接触一门新的语言，都会跟老朋友见一次面，老规矩，HelloWorld。这次我创建了一个带模板的工程。跟之前hello工程做个对比，看看有什么差别，并且简单分析一下项目的结构。
先在终端来波代码粘贴：
ionic start HelloWorld tabs
cd HelloWorld
ionic serve
这样项目就在网页上跑起来了，但是像我这样做原生APP开发的，看着全屏的网页很不爽，用惯了真机和模拟器，我还是希望在网页上也能显示成模拟器的样子，查了一下说可以实现，将浏览器中的地址改为 http://localhost:8100/ionic-lab 就行了。听说之前还有个ionic-lab客户端，但是我去看的时候好像已经不能用了。然后就这样了。
app主页面的雏形出来了。来看下项目文件结构：
这个结构给我的第一感觉就是需要我们手动编写的部分在src，至于其他的是干什么的，查一查得到如下结果：
hooks：编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
node_modules ：node各类依赖包
resources ：android/ios 资源（更换图标和启动动画）
src：开发工作目录，页面、样式、脚本和图片都放在这个目录下
www：静态文件
platforms：生成android或者ios安装包路径（ platforms\android\build\outputs\apk：apk所在位置）
plugins：插件文件夹，里面放置各种cordova安装的插件
config.xml: 配置文件
package.json: node安装模块时的依据
tsconfig.json: TypeScript项目的根目录，指定用来编译这个项目的根文件和编译选项
tslint.json：格式化和校验typescript
其中src工作目录：
app：应用根目录
assets：资源目录（静态文件（图片，js框架。。。）各种需要放置在此文件夹内，不然会出错，（尴尬。。。）
pages：页面文件，放置编写的页面文件，包括：html，scss，ts。（搞事情的）
theme：主题文件，里面有一个scss文件，设置主题信息。
对于以上跟我们结构打交道最多的应该就是src目录，先来看看app目录下app.component.ts文件，
首先，import {变量1} from 变量2 猜测一下应该是从变量2的路径引用到该文件，并命名为变量1。然后@Component莫不是android中的.xml布局文件？紧接着的是类方法？rootPage = 根界面？constructor() = 构造方法？statusBar.styleDefault() = 状态栏应该没差了，splashScreen = 启动动画吗？先暂且这么理解吧，从这个文件大概知道了这玩意应该跟js文件类似或者我们的.java文件，先是声明页面由app.html展示出来，然后根界面是从TabsPage开始展示，并且在构造方法中设置了状态栏等。
再来看看app.module.ts文件
这里应该是对要用到的page进行声明，如同android中AndroidMainifest.xml，至于app.scss文件应该就是css文件
然后Pages目录里的页面文件了，这个不用多说，就是展示出来给人看的，每个页面包含.html文件、.scss文件和.ts文件。
Pages里面就是主要要进行拓展的部分，也是要学习和大量练习的部分。那么到这里，关于项目的创建，和项目的结构也大致了解了。知道了每个模块的任务和分工，我们就能继续进行代码编写了。那么首先，先对这个自动生成的模板进行简单的改造。做个简单的登录界面，登录成功再跳转到主页面。
那么首先在终端输入ionic g page login 新增login模块。打开app.module.ts（本人使用的事sublime text），添加LoginPage的引用，如：import { LoginPage } from '../pages/login/login';并分别在加入 declarations 和 entryComponents 后面加入 LoginPage。在app.component.ts中也添加LoginPage的引用，并修改 rootPage 为 LoginPage，
将login.html丰富一下：
<ion-header>
<ion-navbar>
<ion-title>登录</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label fixed>账号</ion-label>
<ion-input type="text" placeholder="请输入账号" #username></ion-input>
</ion-item>
<ion-item>
<ion-label fixed>密码</ion-label>
<ion-input type="password" placeholder="请输入密码" #password></ion-input>
</ion-item>
<ion-item no-lines>
<label item-right>记住密码</label>
<ion-toggle></ion-toggle>
</ion-item>
<div style="text-align: center; margin-left: 30px; margin-right: 30px;">
<button ion-button block color="danger" (click)="logIn(username, password)">
登录
</button>
</div>
</ion-content>
接着在login.ts中添加login方法：
logIn(username: HTMLInputElement, password: HTMLInputElement) {
if (username.value.length == 0) {
alert("请输入账号");
} else if (password.value.length == 0) {
alert("请输入密码");
} else {
this.navCtrl.push(TabsPage);
}
}
当然不要忘了在login.ts中先添加TabsPage的引用，import { TabsPage } from "../tabs/tabs";
好了，保存一下代码。网页会自动刷新并编译运行。到这里，ionic创建项目的基本流程差不多就大致了解了。接下来的就死丰富页面的内容，添加更多的业务逻辑来完善项目。此处不再进行过多赘述。