ionic for mac 新建与调试

Posted 2020-07-26 化身程序猿

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

首先需要下载node.js 下载地址: https://nodejs.org/en/

现在的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与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;

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文件夹下运行（不行就找会android的）;

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