Ionic 需要Node.js 环境，官网下载：http://nodejs.org/，node 命令默认将安装到 /usr/local/bin
一. 安装Ionic
Mac OS X：
1. 安装Cordova 和 ionic命令行工具：
sudo npm install -g cordova ionic
2. 如果要使用Ionic客户端ios模拟器需要安装ios-sim npm包，命令：
sudo npm -g install ios-sim
#模块与命令的对应关系：
/usr/local/bin/ionic -> /usr/local/lib/node_modules/ionic/bin/ionic
/usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
二. 新建项目
使用现有的app模板或空白页在命令行创建新项目：
ionic start app_name blank #新建空白页
ionic start app_name tabs #使用自带tab模板
ionic start app_name sidemenu #使用自带侧边菜单模板
<({
注意：如果在家目录下创建项目，也许会遇到一个问题，提示 mkdir:/home/myIonic: Operation not supported
命令前加上sudo 也不能解决问题，此时需要做一些文件的改动，如下：
weichendeMacBook-Pro:home weichen$ sudo vim /etc/auto_master # # Automounter master map # +auto_master # Use directory service /net -hosts -nobrowse,hidefromfinder,nosuid #/home auto_home -nobrowse,hidefromfinder /Network/Servers -fstab /- -static
weichendeMacBook-Pro:home weichen$ sudo automount # 不重启的情况下使设置生效
上面只是将此行注释掉： /home auto_home -nobrowse,hidefromfinder
})>
三. 配置平台，运行
Ionic的应用基于Cordova，所以可以使用Cordova的功能来创建、测试和部署应用，但是Ionic功能提供了做同样事情的简单方法。
cd app_name/ && ls # 进入项目目录并显示文件
(ionic platform add ios) # 使 ionic支持 iOS
ionic platform add android # 使 ionic支持 Android
(ionic build ios) # 创建ios应用
ionic build android # 创建android应用
(ionic emulate ios) # 模拟运行, 默认就带一套可运行的模板程序
运行 ionic build android 报下面错的解决方法：
[Error: Please install Android target: "android-21". Hint: Open the SDK manager by running: /Users/weichen/Library/Android/sdk/tools/android You will require: 1. "SDK Platform" for android-21 2. "Android SDK Platform-tools (latest) 3. "Android SDK Build-tools" (latest)]
1. ant 下载： http://ant.apache.org/bindownload.cgi 放入 /usr/local
2. android sdk 下载： http://developer.android.com/sdk/index.html 放入 /usr/local
如果打不开，可以去其它地方下载： http://my.oschina.net/58685474/blog/303825
3. vim ~/.bash_profile 配置环境变量：
export ANT_HOME=/usr/local/apache-ant-1.9.6
export PATH=${PATH}:${ANT_HOME}/bin
export PATH=${PATH}:/usr/local/android-sdk-macosx/tools
export PATH=${PATH}:/usr/local/android-sdk-macosx/SDK
使立即生效，source ~/.bash_profile
4. 命令行中运行：/usr/local/android-sdk-macosx/tools/android 自动进入跳出管理界面，把提示中的东西勾选装上。
① Android SDK Platform-tools (最新版本)
② Android SDK Build-tools (最新版本)
③ Android5.1.1(API 21)
5. ionic platform add android, ionic build android 完成。
Note：安装什么样的android系统环境，是由 platforms/android/project.properties 和
platforms/android/CordovaLib/project.properties 里面决定的，不过还是以默认的为准安装环境，否则新建一个项目，又要重新装一遍sdk环境。
四. 创建自己的App
首页模板index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- Needed for Cordova/PhoneGap (will be a 404 during development) --> <script src="js/app.js"></script>
<script src="cordova.js"></script>
</head>
<body ng-app="todo">
</body>
</html>
ionic.bundle.js 是 ionic 的 AngularJS 扩展文件，绑定了 ngAnimate 和 ngSanitize，但如果需要其它Angular模块，需要从 lib/js/angular 中引入。 cordova.js 必须是最后一个script文件，在开发文件中看不到，只在运行和模拟app时才自动引入。
菜单案例，在body中加入：
<body>
<ion-side-menus> <!-- 菜单控制器 -->
<ion-side-menu-content> <!-- 中间内容区域 -->
</ion-side-menu-content>
<ion-side-menu side="left"> <!-- 左侧，起初隐藏的菜单 -->
</ion-side-menu>
</ion-side-menus>
</body>
初始化app，在我们自己的 js/app.js 中加入：
angular.module(‘todo‘, [‘ionic‘])
这是用Angular创建应用的方式，它引入用来处理上面标签的ionic模块，现在运行还是没有内容，完整的内容是：
<body ng-app="todo">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content>
<ion-header-bar class="bar-dark">
<h1 class="title">Todo</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
<ion-header-bar class="bar-dark">
<h1 class="title">Projects</h1>
</ion-header-bar>
</ion-side-menu>
</ion-side-menus>
</body>
现在可以运行看到内容了。
五. 测试你的App
在桌面浏览器上测试：
$ ionic build ios$ ionic serve
模拟器测试：
$ ionic build ios $ ionic emulate ios
作为原生应用运行：
$ ionic run android
六. 构建
https://ionicframework.com/docs
本篇写于 2014-12-26，正是 Angular 国内兴起时，但直到今天才发布出来。
现在看一下开发混合App 对于前端库的选择，如果现在用的是 Angular，那么选择 Ionic 就非常容易上手；
如果现在用的是 Vue 或者 React，那么选择 quasar framework、Framework7 等也不失为一种好的选择。
Link：https://www.cnblogs.com/farwish/p/4186601.html
原文地址：https://www.cnblogs.com/farwish/p/4186601.html