ionic官网

ionic 相关命令，官网
学习 Ionic

查看机器 ionic 的版本等相关信息

$ ionic info

安装 ionic 和 cordova （全局安装）

npm install -g cordova ionic

没有写明版本号则是安装最新版。
截至(2017-7-18) 最新ionic版本3.5.0.
查看本机 ionic 的版本

$ ionic -v
3.5.0

若要卸载ionic ：

npm uninstall -g ionic
npm cache clean

1. 如果想同时兼容开发ionic1,则需要执行cnpm i -g ionic@2.2
2. 如果只想使用ionic1,就执行cnpm i -g ionic@1.7.16,这里1.7.16是1.x最新版本
3. 如果你安装过ionic,执行命令则会覆盖你以前的安装.因此就不用想着更新旧版本,直接覆盖就行了
   同理，cordova 若指定版本安装和 ionic 类似。做ionic2开发,cordova版本要求5.0以上
   这里是 cordova 的所有插件

创建 ionic 项目的文件夹Demo，在当前目录下继续执行（这里用的是 tabbar-tabs 的形式，还有空白项目-blank，侧边菜单-sidemenu）

ionic start Demo tabs

这里可以使用$ ionic start --list来查看 ionic 所持有的模板。

若指定 ionic1或ionic2创建项目（"–v2" ，20170719替换成"–type=ionic2"的形式）：

现在更改成（–type=**）的形式
下面是使用 ionic1创建项目：

ionic start MyAppV2 tabs –type ionic1
下面是使用 ionic2创建项目
ionic start MyAppV2 tabs –type=ionic-angular

###以ionic1 创建的项目目录
ionic1 创建的项目目录图：

1. hooks：文件夹是伴随Cordova的安装自动生成的文件夹，该文件夹有脚本可以定制Cordova命令。一般情况下，不对该文件夹中的文件进行更改。

2. node_modules 包含所有 npm 安装的依赖包

3. platforms:平台文件

4. plugins：用于放置cordova插件源码的文件夹，添加插件后自动生成相应文件夹

5. resources:这是资源文件，一般是 APP 的图标和启动页，app 用到的图片。

6. scss：如果在Ionic项目，想要使用CSS的预处理语言SASS来修改应用程序的样式，那么你可以在scss文件夹下的相应文件覆盖Ionic的默认值。如果你熟悉SASS语言，你可以在相应scss文件添加SASS命令，或者更改目录结构，增加子文件夹。如果你想在项目中使用SASS去工作，你需要首先运行Ionic setup SASS 命令。

7. www（主要工作目录）
   1）css、img、js 是对应放置各种资源文件的文件夹。
   css：可以在此文件夹中的样式文件中编写自己的CSS，从而改变Ionic应用程序的默认样式。
   img：用于存放图片，图片可运用在所建立的项目中。
   js：用于放置js文件的文件夹，其中以AngularJS文件为主。

   • app.js：通过控制器和指令加载angularJS文件的主要应用程序文件。
   • Controller.js：可用于任何类型的JavaScript文件，可被添加到应用程序的不同部分。
   • services.js:：services.js包含了通用的数据和功能服务，数据将运用在设计的应用程序当中，功能服务可以在 controller 里面调用。
     2）lib：用于放置第三方库文件，如ionic.js、jQuery、mobiscroll等，创建的应用程序能够访问这些库文件和资源。
     3）templates：放置AngularJS模板文件的地方，设计的APP会采用里面的模板，在应用程序的页面展现出来。也可以在这个文件夹内创建子文件夹，添加你自己的模板。
     4）index.html：index.html文件是应用程序的核心文件，它将被Ionic载入浏览器。

8. .bowerrc：Bower包管理器的配置文件，使用Bower可以很方便的安装第三方库

9. .gitignore：当使用Git和GitHub追踪项目，.gitignore可以用来指定忽略文件。如果你不想特定的文件夹和文件被上传到Git仓库（repository)，你可以使用gitignore防止文件转移。

10. config.xml：ionic项目的核心配置文件，可以配置项目的包名，未来打包成app时的名称，作者，以及一些全局属性

11. gulpfile.js：类似于grunt，都是基于Node.js的前端构建工具。不过gulp压缩效率更高。

12. ionic.project：ionic的工程文件

13. package.json：package.json文件在许多Nodejs项目里都会出现， 它定义了这个项目所需要的各种依赖模块，项目的配置信息（比如名称、版本、项目描述等元数据） 。 Node和Gulp工具可以依据文件中的项目需求和配置信息，去履行责任。一般不修改该文件。
    ###以 ionic2创建的项目目录：
    

附上 src 目录

src 含有我们原始的未经编译的代码，也是我们编写 ionic2APP 的主要工作目录。

1.src/index.html ：是 Ionic 2 APP的主入口文件，设置脚本和CSS，引导启动我们的 APP。
为了让应用正常运作，Ionic 2 会在HTML中寻找 标签。

<ion-app></ion-app>

2.并且在下方我们还能看到这样的脚本引用：

<script src="cordova.js"></script><script src="build/polyfills.js"></script><script src="build/main.js"></script>

	1）cordova.js 是Cordova应用的需求文件，我们在开发过程中将会提示404错误，这不需要担心。Cordova将会在项目构建过程中自动注入这个文件。2）build/polyfills.js 是在构建过程中自动生成的，我们不需要过多关注。3）build/main.js 是一个包含了Ionic, Angular和你的JS脚本的文件。

3. ./src/app/app.component.ts
   在 app 文件夹中能找到我们的预编译代码。这是Ionic 2应用程序的大部分工作起始的地方。当我们运行 ionic serve 时， app 中的代码将被编译成当前浏览器能够执行的JavaScript版本。
   app.component.ts 是应用的入口文件。
   在文件中我们能够看到这样的结构：

@Component({templateUrl: 'app.html'
})
export class MyApp {constructor(** ){}
}

每个应用程序都有一个根组件，用于控制应用程序的其余部分。这跟Ionic 1和Angular 1中的 ng-app 非常相似。原先的启动配置被放倒了app.module.ts 文件中。
在这个组件中，我们设置了模版文件 app.html:

<ion-menu [content]="content"><ion-header><ion-toolbar><ion-title>Menu</ion-title></ion-toolbar></ion-header><ion-content><ion-list><button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">{{p.title}}</button></ion-list></ion-content></ion-menu><!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在这个模板中，我们设置了一个 ion-menu 作为侧面菜单，然后一个 ion-nav 组件作为主要内容区域。 ion-menu 菜单的 [content] 属性绑定到了我们 ion-nav 的本地变量 content 上。所以我们知道哪里会发生动作变化。
接下来，我们来看看如何创建更多页面并执行基本的导航。
添加页面
现在我们对Ionic 2应用的布局有一个基本的掌握，让我们来了解一下在应用中创建和导航到页面的过程。
让我们看一下 app.html 页面的底部：
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>注意 [root] 属性绑定。 这本质上是设置了ion-nav组件的“root”页面。 当ion-nav加载时，变量 rootPage 引用的组件将是根页面,对应下面注释部分。
在 app.component.ts 中， MyApp 组件在其构造函数中指定：

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';@Component({templateUrl: 'app.html'
})
export class MyApp {@ViewChild(Nav) nav: Nav;rootPage: any = HomePage;//变量 rootPage 引用的组件将是根页面。pages: Array<{title: string, component: any}>;constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {this.initializeApp();// used for an example of ngFor and navigationthis.pages = [{ title: 'Home', component: HomePage },{ title: 'List', component: ListPage }];}initializeApp() {this.platform.ready().then(() => {// Okay, so the platform is ready and our plugins are available.// Here you can do any higher level native things you might need.this.statusBar.styleDefault();this.splashScreen.hide();});}openPage(page) {// Reset the content nav to have just this page// we wouldn't want the back button to show in this scenariothis.nav.setRoot(page.component);}
}

运行 App，先进入 Demo 文件夹，在运行以下命令

ionic serve
运行终端结果如下：
运行完，浏览器出现页面：

安装测试和真机环境

测试 sim
真机环境

$ npm install -g ios-deploy
运行完终端显示：** BUILD SUCCEEDED **如图：

进入 Demo 文件夹，有一个 config.xml 的文件， 其中有一个<name>**</name>更改这个名字，然后在终端输入一下命令生成一个 iOS 平台（这样就可以运行在终端设备上了），

$ cordova platform add ios

在项目中会出现 platforms文件夹

OK。至此就可以测试了。
我采用 Webstorm 编辑angularJS,ionic 代码。

常用命令

ionic info...........................查看ionic版本信息
ionic serve..........................最常用,在浏览器上运行app,开发调试
ionic serve --lab....................在浏览器上运行app,同时打开android,ios,windows三个app界面----------
以下android可以更换成 iosionic run android....................手机用usb连接电脑,执行此命令直接把debug apk安装在手机上
ionic run android --livereload.......执行此命令直接把debug apk安装在手机上,并且代码改动手机也会刷新,类似ionic serve项目,调试硬件功能,很实用
ionic resources [--splash][--icon]...将图标命名为icon(1024*1024)，启动画面命名为splash(2732*2732),格式支持png、psd和ai,放到resources文件夹下执行ionic resources可生成不同分辨率手机所需要的icon和splash执行ionic resources --icon只生成图标执行ionic resources --splash只生成启动画面
cordova platform add android.........添加安卓平台
cordova platform rm android..........删除安卓平台
cordova plugin add 插件名/插件地址....添加cordova插件,这个插件地址可以是github的项目地址,也可以是一个本地文件夹路径
cordova plugin rm 插件名..............删除已安装的cordova插件
cordova plugin list..................列出所有已安装插件
cordova build android................编译安卓debug环境apk
cordova build android --release......编译安卓生产环境apk
cordova build android --prod --release编译并压缩安卓生产环境apk