ionic for mac 新建与调试

时间:2021-12-28 16:19:10

ionic官网:http://ionicframework.com/

首先需要下载node.js,建议node管理方式请先详细查看林一篇博客http://www.cnblogs.com/minyc/p/myc201606191543.html,node官方下载地址: https://nodejs.org/en/

mac下的node.js 一般的带有npm的;

在命令窗口输入 npm -v 查询npm版本 输入node --version 查询node.js版本

首先下载node.js跟新工具 命令是:npm install -g n   如果是mac安装的命令都要加sudo如:sudo npm install -g n

输入安装密码安装,然后输入命令:n stable  来跟新node.js到最新的稳定版本 mac下命令行 sudo n stable;

然后就是下载cordova(主要用于html操作手机上的硬件功能来使用,无要求可不下载在ionic下直接删除coedova.js引用即可)与ionic;

打开命令窗口 输入 npm install -g cordova ionic 为一起安装 也可以分开安装 先安装npm install -g cordova 再安装 npm install -g  ionic ;跟新cordova或者ionic命令 npm update -g cordova 或者 npm update -g ionic ;删除命令 npm uninstall cordova ;mac下加sudo

下载好后根据ionic官网命令

1: 进入需要创建工程的文件夹输入命令: ionic start myApp tabs  myApp是工程名,tabs为工程模式。ionic模式存在blank tabs sidemenu,替换模式就会创建相应的工程;默认为 tabs类型 可直接命令ionic start myAPP;跟新已经建立项目的ionic库 ionic lib update

2:进入你创建的工程文件,输入命令 ionic platform add android老创建android项目;文件夹下会生成platforms文件夹里面的android文件就是android工程

3:一.直接运行android工程,我们插上android手机或者运行android模拟器,然后ionic build android  来编译android工程,然后ionic run android;程序应该会在你的手机或者模拟器上跑起来就可以看了。二.用android studio 打开,直接打开andorid studio,然后open这个android工程,之后像普通程序一样运行。

4:web编写:下载webstorm,正版免费体验一个月,可以下破解版,或者其他网页开发工具 打开工程目录下的www文件,进行网页编写

5:调试运行:下载tomcat,然后开启将www文件夹直接放在tomcat下的webapps 文件夹下 将android中的地址修改成tomcat的地址进行访问或者直接放在assests文件夹下运行(不行就找会的);

6:其他页面快速调试工具(需要vpn),进入phonegap官网:http://phonegap.com/,根据他的步骤现在在桌面工具 Install our desktop app,然后再app store或者google play上搜索PhoneGap Developer 下载手机连接工具,打开桌面工具点击➕添加你创建的额ionic项目,然后打开手机连接工具连接就可以看到,实时变化的页面。