配置ionic(低版本)

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

 

低版本

 

 

1、安装node

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

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

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

2、安装Ionic Framework

npm install -g ionic

安装成功则输入命令行ionic -v可看到版本号(失败原因可能和node版本有关)

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

3、创建项目工程

所有ionic命令都在工程目录下执行

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

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

 

默认:

工程文件夹名称:client.demo

工程名称:JXBankDemo

工程包名:com.jxbank.client

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

4、添加平台支持

ionic platform android ios

命令执行后,会添加AndroidiOS平台的支持,在工程platforms文件夹下,会生成androidios文件夹,分别为两个平台的客户端工程代码,可以使用Android StudioXcode打开导入工程。

windows操作系统不支持添加ios,只能生成android文件夹)

5、安装ruby

因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。

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

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

 

 

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

6、安装sass

安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby

 

 

然后直接在命令行中输入

gem install sass

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

7、设置sass

ionic setup sass   

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

如果安装失败使用镜像安装(或暂时略过)

8、调试工程

ionic serve

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

9、(没有执行)

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

 

ionic emulate ios[android]

AndroidiOS模拟器运行工程

ionic run ios[android]

AndroidiOS真机运行工程

10、安装cordova

npm install -g cordova

如果安装失败使用淘宝镜像安装

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

11、安装webstorm

下载安装,最后一步可以选择直接导入dbank-app项目

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

 

 

12、(没有执行)

创建并运行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

13、(没有执行)

svn上下载代码

路径是  E:\directbank\trunk\BankPartnerWeb

14安装cnpm包管理工具

npm install -g cnpm

15、安装node_modules模块

到下载的工程目录下执行cnpm install命令,并且在webstorm设置其不更新(没有成功)

 

 

16、安装完成后,找到目录中的gulpfile.js文件,右键

 

 

成功则会出现以下界面

 

 

 

17、设置ionic快捷启动项

 

 

posted @ 2017-05-31 16:58  amzjj  阅读(3189)  评论(0编辑  收藏  举报