Ionic2实战-项目初始化

准备工作

Ionic2官网
Ionic2官方GitHub地址
Ionic2官方文档地址

• Ionic的官方文档还是非常全面的，提供了包括命令行Cli、组件API等的详细说明，GitHub还提供了每一个版本的升级指南，非常贴心。

• 另外Ionic2使用了Angular2和TypeScript做基础来开发的，与Ionic1完全不同，所以不熟悉的同学可以先去大概了解下语法基础。

项目初始化步骤

1. 下载安装NodeJS

下载安装完以后使用npm -version命令看下是否安装成功，如出现版本号则说明安装成功

命令

2. 安装Ionic和Cordova

Ionic和Cordova是项目基础，必须安装，命令为：

npm install -g cordova ionic

其中-g参数代表全局有效。安装完以后同样检查安装是否正确，检查命令ionic -version和cordova -version。出现版本号代表安装成功。
因为GFW的原因在国内可能会出现安装巨慢甚至失败的情况，一种解决办法是科学上网，另外一种是可以切换到cnpm命令形式执行，cmpn安装办法见链接https://npm.taobao.org/

命令

3. 执行Ionic2项目初始化命令：

ionic start myApp tabs

该命令默认创建最新版本的项目，如需指定版本，比如创建Ionic1项目，可添加参数“--type ionic1”。
其中“myApp”代表创建项目的名字，“tabs”为创建项目的基础结构为带底部tabs类型的项目，还有“ blank”和“ sidemenu”类型可以选择，“ blank”为空项目，“ sidemenu”为带侧方按钮的项目。实践来说，其实都没有太大差别。

命令

4. 进入刚刚创建的项目目录

cd myApp

5. 启动项目

ionic serve

ionic serve是ionic cli的项目启动命令，执行以后会自动编译项目的scss和ts文件，打包后以后用一个自带的web服务器启动起来，启动端口的8100，如果8100被占用则顺延使用8101端口。后续开发过程中如检测到本地文件有任何变化都会执行编译动作，刷新浏览器。

有了这一套命令行，前端的开发调试变得异常便捷，不过有一点值得注意的是，由于开启了文件监视功能，任何文件的变更都会引起整个项目的重新编译，在配置低的机子上可能会造成机子的卡顿。可以使用关闭开发IDE的自动保存功能解决该问题。

最后

其实至此整个项目已经创建完毕了，简单的功能已经能够流程运行，是不是感觉还挺方便的。不过仔细浏览一下项目的目录，还是有点小摸不清头脑的，究竟这些一个个文件都代表什么意思，目录结构各有什么作用呢，下一篇我们详细说明。