首先需要安装 Node.js，我们在接下来的安装中需要使用到其 NPM 工具。
然后通过命令行工具安装最新版本的 cordova 和 ionic 。默认你已装好了 Android Studio 、Xcode。

安装 ionic

$ npm install -g cordova ionic

构建ionic项目

命令格式：

$ ionic start [<name>] [<template>] [options]

常用创建命令(选择一种模板来创建自己的应用)：

• 创建一个空白的只有导航栏的项目
  • ionic start myApp blank
• 创建一个带侧边栏的项目
  • ionic start myApp sidemenu
• 创建一个带标签栏的项目
  • ionic start myApp tabs

模板.png

添加Android平台

在跑 Android 端的时候需要先开启 Android 模拟器，介绍一种可以不用开启 Android Studio 直接用终端命令打开模拟器的方法：
模拟器路径 + -netdelay none -netspeed full -avd + 模拟器的名字
例如：
/Users/xxx/library/android/sdk/tools/emulator -netdelay none -netspeed full -avd Nexus_5X_API_26

// 添加 Android 端
ionic cordova platform add android

// build Android apk
ionic cordova build android

// 运行 Android apk
ionic cordova emulate android

Android.png

添加iOS平台

iOS 端不需要提前开启模拟器，但是要注意所有的命令中iOS中的OS必须小写os

//添加 iOS 端
ionic cordova platform add ios

//build ios
ionic cordova build ios

//运行 iOS 端项目
ionic cordova emulate ios

iOS.png

调试

2016年12月5日开始 Ionic Lab客户端就被废弃了，但是有新的轻量方法替代。

• ionic serve
cd到ionic项目文件夹执行ionic serve会在http://localhost:8100/开启一个本地环境来预览调试APP。但是在 UI 显示方面Emulated Devices切换不同的平台后需要刷新浏览器才能显示对应的平台的效果
  

• ionic serve --lab
cd到ionic项目文件夹执行ionic serve --lab会在http://localhost:8100/ionic-lab开启一个本地环境来预览APP。UI 显示方面可以同时显示Android、iOS的效果。左边面板上还可以直接查看官方文档，很方便

项目目录结构解析

hooks：编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
node_modules：node各类依赖包
platforms：生成android或者ios安装包路径（ platforms\android\build\outputs\apk：apk所在位置）
plugins：插件文件夹，里面放置各种cordova安装的插件
resources：android/ios 资源（更换图标和启动动画）
src：开发工作目录，页面、样式、脚本和图片都放在这个目录下
www：静态文件
config.xml: 配置文件
package.json: node安装模块时的依据
tsconfig.json: TypeScript项目的根目录，指定用来编译这个项目的根文件和编译选项
tslint.json：格式化和校验typescript

• src工作目录：
  • app：应用根目录
  • assets：资源目录（静态文件（图片，js框架。。。）各种需要放置在此文件夹内，不然会出错，（尴尬。。。）
  • pages：页面文件，放置编写的页面文件，包括：html，scss，ts。（搞事情的）
  • theme：主题文件，里面有一个scss文件，设置主题信息。
    原文看这里