Ionic开发项目

　　hybrid app是移动开发代替原生开发完成app应用项目的一种方案，Ionic是hybrid app开发的一种选择。对ionic有兴趣能够去网上找相应的基础知识来学习了解，由于Ionic是基于AngularJS框架开发的，因此在使用Ionic以前须要对angularjs有必定的了解。在这里说一下创建ionic项目的过程。

1.环境准备：

（1）nodejs安装

　　菜鸟教程网有nodejs的简单介绍和环境安装。安装完后，打开cmd控制台输入图中指令，显示相应的版本号说明安装好了。

（新版的NodeJS已经集成了npm，因此npm和nodejs环境通常是一块儿安装完成）

           

（2）cnpm安装（npm命令有时下载很慢，这是个很折腾得事，因此能够用cnpm来执行相关命令，npm可用状况下能够不用cnpm），cnpm使用的是淘宝网的镜像http://npm.taobao.org，能够经过如下命令全局安装:

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

执行完后，键入cnpm -v命令，显示如下信息说明安装成功

　　

（3）安装ionic和cordova

npm install -g cordova ionic

安装完后，输入下图指令，显示相应版本号说明安装成功：

　　

2.创建项目工程

Ionic官网提供了三个项目模板blank、tabs和sideMenu ，参阅：http://ionicframework.com/getting-started/ ，咱们使用下面指令创建一个空模板：

1 ionic start myIonic blank

其中myIonic为咱们的项目名称 

执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹，这个文件夹就是Ionic项目的所在目录了。 
目录下有如下文件：

 1 hooks           //google以后这个目录应该是在编译cordova时自定义的脚本命令，方便整合到咱们的编译系统和版本控制系统中
 2 plugins         //cordova插件的目录，插件的安装下一节详述
 3 scss            //scss文件，发布时编译这个目录下的文件输出到www的css目录中
 4 www             //咱们的开发目录，页面、样式、脚本和图片都放在这个目录下
 5 --css
 6 --img
 7 --js
 8 --lib
 9 --index.html
10 bower.json      //bower配置文件
11 config.xml      //Ionic的配置文件 ⱃ能够配置app的id，名称、描述起始页和一块儿其余配置
12 gulpfile.js     //gulp构建工具的执行文件，在这个文件中建立任务实现编译scss，css、js优化等
13 ionic.project   //Ionic的项目文件能够配置Ionic命令中livereload的监控文件
14 package.json    //npm配置文件

至此咱们就创建了一个ionic项目，下一章说下怎么编译打包开发完的ionic项目。