配置ionic（低版本）

淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org，安装完成后，之后全部的插件都使用cnpm这个命令来进行安装。

 

低版本

 

 

一、安装node

下载地址：https://nodejs.org/en/blog/release/v4.4.2/

安装成功则输入命令行node -v可看到版本号

（卸载以前版本强烈推荐系统自带设置-系统-应用和功能-nodejs右键卸载）

二、安装Ionic Framework

npm install -g ionic

安装成功则输入命令行ionic -v可看到版本号（失败缘由可能和node版本有关）

安装低版本须要强制版本号npm install ionic@1.2.4安装，且低版本须要低版本的node和npm

三、建立项目工程

全部ionic命令都在工程目录下执行

ionic start dbank-app tabs -a "dbank-app" -i com.dbank-app

会在该路径下建立dbank-app工程，成功可看到该文件

 

默认：

工程文件夹名称：client.demo

工程名称：JXBankDemo

工程包名：com.jxbank.client

工程种子模板类型：带有底部tabbar的默认工程

四、添加平台支持

ionic platform android ios

命令执行后，会添加Android和iOS平台的支持，在工程platforms文件夹下，会生成android和ios文件夹，分别为两个平台的客户端工程代码，可使用Android Studio和Xcode打开导入工程。

（windows操做系统不支持添加ios，只能生成android文件夹）

五、安装ruby

由于sass依赖于ruby环境，因此装sass以前先确认装了ruby。

下载地址：https://rubyinstaller.org/downloads/

安装时务必勾选Add Ruby executables to your PATH这个选项，添加环境变量，否则之后使用编译软件的时候会提示找不到ruby环境

 

 

安装成功则输入命令行ruby -v可看到版本号

六、安装sass

安装完ruby以后，在开始菜单中，找到刚才咱们安装的ruby，打开Start Command Prompt with Ruby

 

 

而后直接在命令行中输入

gem install sass

安装成功打开cmd输入命令行sass -v可看到版本号

七、设置sass

ionic setup sass   

安装过程当中会提示安装gulp，直接使用npm install -g gulp安装

若是安装失败使用镜像安装（或暂时略过）

八、调试工程

ionic serve

命令执行后，会自动打开浏览器，并加载工程首页，进行开发调试，默认运行在LiveReload模式下，修改任何源码都会在浏览器实时生效，看到修改效果。

九、（没有执行）

真机运行工程，会编译打包对应平台的程序，生成应用的安装程序并安装运行

 

ionic emulate ios[android]

在Android或iOS模拟器运行工程

ionic run ios[android]

在Android或iOS真机运行工程

十、安装cordova

npm install -g cordova

若是安装失败使用淘宝镜像安装

安装成功可在命令行看到版本号

十一、安装webstorm

下载安装，最后一步能够选择直接导入dbank-app项目

在webstorm中设置SCSS Watcher（自定义路径是--no-cache --update $FileName$:$ProjectFileDir$/www/css/$FileNameWithoutExtension$.css）

 

 

十二、（没有执行）

建立并运行project （若是须要在Android或ios环境调试还须要安装对应的sdk）

a.新建一个目录pro，并进入 

引用

> cd C:\pro

b.建立一个“myapp”工程 

引用

> cordova create myapp com.yourname.myapp MyApp

c.进入工程目录 

引用

> cd myapp

d.添加平台支持 

引用

> cordova platforms add ios 
> cordova platforms add android 

> cordova platforms ls

1三、（没有执行）

到svn上下载代码

路径是  E:\directbank\trunk\BankPartnerWeb

14、安装cnpm包管理工具

npm install -g cnpm

1五、安装node_modules模块

到下载的工程目录下执行cnpm install命令，而且在webstorm设置其不更新（没有成功）

 

 

1六、安装完成后，找到目录中的gulpfile.js文件，右键

 

 

成功则会出现如下界面

 

 

 

1七、设置ionic快捷启动项