最简单的混合APP开发框架——搭建你的第一个Ionic应用（一）

上次写了一篇关于Ionic3的文章，但是对于从来没有接触过Ionic的开发者来说，可能不是太友好。为了让更多的人了解这个非常好的混合应用开发框架，今天这篇文章主要介绍如何从零用最快的时间做一个Ionic APP。
一）为什么是Ionic？
如果你以前从来没有接触过移动开发，但是现在想做一个APP，那么Ionic将是你的首选。
虽然React Native也是现在很好的混合开发框架，但是我认为React Native更适合有原生应用开发经验的人，更适合规模较大型的APP，更适合对性能要求极高的APP，反过来，如果你的需要是上面这样的APP，那么Ionic可能就不是你的首选了。React Native开发成本比Ionic高了很多。
至于除了React Native和Ionic之外的其他框架，暂时不用考虑了。
使用Ionic，你不需要有任何原生开发经验，而且Ionic提供了使用起来很简单的组件，最接近原生的UI，非常漂亮，还有基于Cordova的强大的原生插件（摄像头，通讯录，等等），基于Angular的丰富生态系统的库，所有Angular相关的github项目都可以在Ionic中使用。
总结起来可以用三个词语描述Ionic：简单，漂亮，快。
搭建一个Ionic app非常的简单，Ionic 已经把所有的项目结构帮你搭建好了，甚至代码文件目录也已经做好了，如果你已经搭建好了所需要的开发环境，并且对Angular已经比较熟悉，那么定制你的APP将变得前所未有的简单。

二）什么是Ionic？
Ionic是基于Cordova的使用Web技术开发混合应用的前台基于Angular的框架，Ionic1使用的是Angular1，Ionic2之后使用的都是Angular2技术栈，Ionic以后更多的新版本也都是在2的版本上迭代。Ionic2之后只支持android4.3以上的版本。
Ionic官方网站

三）搭建Ionic应用
1)安装Node

2)运行npm install -g cordova ionic，这个命令用来安装Ionic CLI，用来使用Ionic终端命令。

常用的命令有：

3)进入电脑的某个文件目录，运行 ionic start MyIonicProject tutorial –v2
这里start代表新建一个Ionic应用，MyIonicProject 是项目名称，tutorial是tutorial模板，还有其他几种模板：

1. tabs : 底部3个tab模板
2. sidemenu：侧边栏菜单模板
3. blank：空模板
4. super：带有十几个页面（比如登陆，谷歌地图，列表）的一个项目模板
5. tutorial：项目目录比较完整的引导模板
6. –v2：Ionic2项目，如果你想使用Angular1，–v1即可。本文默认都是Ionic2及以后的版本。

这个过程需要等待，因为会安装package.json里的所有引用的包。如果你使用的是super模板，start成功之后打开项目，可以看到这样的结构：

• plugins目录是安装的cordova插件，cordova插件是使用原生组件的方式，默认的会装几个必须使用的，以后我们使用命令行（比如 ionic cordova plugin add cordova-plugin-camera）安装的插件会自动放到这个目录里。
• resources是存放我们的项目经过cordova编译之后的android和ios的一切资源的，比如源代码，app的icon，资源图片等等，这里会生成原生的android或者ios项目，比如以后生成的apk文件也是放在这里android目录下面。
• src是我们的项目代码目录，我们将在这里编写我们的APP。如果你对这里的代码结构感到陌生，你需要先花点时间了解Angular
• www是我们的项目作为angular项目编译之后生成的文件。

4）运行 ionic serve 可以在浏览器查看效果

这样我们的ionic项目就搭建完成了。