准备工作
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的自动保存功能解决该问题。
最后
其实至此整个项目已经创建完毕了,简单的功能已经能够流程运行,是不是感觉还挺方便的。不过仔细浏览一下项目的目录,还是有点小摸不清头脑的,究竟这些一个个文件都代表什么意思,目录结构各有什么作用呢,下一篇我们详细说明。