ionic安装配置步骤

本例是在win10系统下搭建的一个android应用实例

1.首先安装node.js

下载适合你电脑的版本，过程自行百度

2.使用node.js集成的包管理工具npm

安装ionic和cordova
在命令行里输入
npm install -g cordova ionic

下载过程由于国内墙的问题可能失败,可以使用淘宝国内的镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
下载完后运行命令

cnpm install -g cordova
cnpm install -g ionic

Paste_Image.png

3.创建应用

使用使用ionic官方提供的现成的应用程序模板，或一个空白的项目创建一个ionic应用：

ionic start myApp tabs

4.运行或调试app

浏览器，安卓模拟器和真机三种方式

1. 直接在浏览器运行
   在项目主目录打开命令窗口，执行ionic serve,首次执行，会让你选择服务器地址，一般选择localhost，此时你的app就会显示在浏览器中，按f12，打开手机模式，就可以运行你的app了，有一点：浏览器是热部署的方式，当你修改完代码，点击保存后，浏览器就会重新启动服务，获取最新的代码，你的修改立刻就会展现出来。
2. 使用安卓模拟器运行
   在项目主目录打开命令行窗口，执行下列命令

ionic platform add android  （添加android平台）
ionic build android         （生成android的apk文件）
ionic emulate android       （在模拟器或者真机上运行）

生成apk文件和运行以后，这两步可以合并成ionic run android一个命令，当修改程序代码后，执行这一个命令查看即可。

Paste_Image.png

3. 使用手机运行
   在使用模拟器运行ionic_app步骤中执行完那几行创建运行代码后，使用数据线连接电脑，打开USB调试模式，修改连接方式为“媒体设备（MTP）”模式

执行ionic run android命令

Paste_Image.png

但是运行在Android真机上，会出现标签栏置于顶部的问题。将下面的代码复制粘贴到app.js的config配置下，标签栏就会出现在底部了

$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');