本文讲述使用ionic开发应用的第一步:安装与创建工程,ionic提供了非常强大的CLI命令帮助我们更快更好地创建工程、修改工程、测试工程。

一.安装Ionic CLI和cordova

安装CLI最简单的方法是通过npm安装(别问我npm怎么安装):

$ npm install -g cordova ionic

注意:-g参数表示全局安装,为保证不会出错,Windows用户使用管理员权限打开命令提示符;*unix在命令前加上sudo,下同,不同版本Linux终端获取管理员权限可能不同,请自行查阅。

1.测试安装是否成功

$ ionic -v
cordova -v

如果安装成功,上述命令均会出现对应的版本号。

2.可能出现的问题

国内由于墙的原因,通过npm安装不成功很正常,请自备梯子,或按下面的方式使用淘宝镜像(cnpm):

安装淘宝npm镜像:

 npm install -g cnpm --registry=https://registry.npm.taobao.org

使用npm安装的JS库或是其他文件都可以使用cnpm代替了,如安装ionic和cordova:

$ cnpm install -g cordova ionic

二.使用Ionic CLI创建工程

ionic拥有十分强大的命令行接口,最简单的创建工程的方式:

$ ionic start myapp [template]

[template]表示初始模板,初始模板可以从ionic预定义的模板中来,也可以通过Github仓库、Codepen、甚至本地目录中来。初始模板会变成cordova工程目录下的www文件夹(ionic封装了cordova的一些操作,创建工程的操作其实是通过cordova完成的):

1.ionic预定义模板

  • tabs
  • sidemenu
  • blank

2.Github仓库

  • 任何Github仓库的地址,如:https://github.com/driftyco/ionic-starter-tabs
  • ionic预定义模板只是其对应Github仓库地址的别名

3.Codepen地址

  • 任何Codepen地址,如http://codepen.io/ionic/pen/odqCz

4.本地文件夹

  • 本地文件夹的相对路径或绝对路径

5.创建工程命令行参数

--appname, -a  .......  app名称(使用引号包围)
--id, -i  ............  包名,如com.mycompany.myapp
--no-cordova, -w  ....  不要以cordova的方式创建工程

参考文档:
Ionic 2环境搭建
Ionic官方文档之CLI
Ionic工程文件组织结构
Ionic代码压缩与代码混淆