ionic项目本地配置及调试方法记录

一、安装node

安装node之后会将npm一起安好,还有执行下面步骤的时候node是很重要的环境。具体安装方法很简单,不再赘述。

二、利用npm安装

用npm执行下面的命令:

$ npm install -g cordova ionic

这样就同时全局安装好了cordova和ionic,可以使用cordova和ionic的命令了。

当然如果由于某些不可言喻的因素下载不下来或者很慢的话呢,可以将npm转换成国内的镜像。我用的是淘宝的镜像,具体方法可以点这里(npm淘宝镜像)。

三、通过ionic创建一个项目

可以使用ionic官方提供的应用程序模板,或一个空白的项目创建一个ionic应用,appName就是你应用的名字:

//空白项目
$ ionic start appName
//tabs模板
$ ionic start appName tabs

四、运行刚才创建的ionic项目

先进入刚才创建的项目文件夹,然后创造一个移动平台项目,build后就可以在模拟器上运行了:

$ cd appName
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

ios项目只能在mac上跑,如果要搞安卓应用,则把上面的ios全部换成android就可以了。当然要先配置好android环境和模拟器环境。

还有,如果想要真机调试的话,连好手机,执行下面一句:

$ ionic run ios

五、安卓环境配置

需要的环境是:

  • Java JDK
  • Apache Ant
  • Android SDK

具体安装过程不再赘述。

六、本地调试环境搭建

本地下,需要搭建一个http服务器,以请求的方式打开项目中www/index.html即可在浏览器中查看效果。这里我选择了browser-sync来创建监听服务器:

首先用npm全局安装browser-sync:

$ npm install -g browser-sync

然后进入项目的目录,监听此目录:

$ browser-sync start --server

这时候没啥问题的话会弹出这么几句话:

[BS] Access URLs:
--------------------------------------
Local: http://localhost:3000
External: http://192.168.1.104:3000
--------------------------------------
UI: http://localhost:3001
UI External: http://192.168.1.104:3001
--------------------------------------
[BS] Serving files from: ./

这就说明,服务器创建好了,监听的是localhost:3000端口,在浏览器里输入localhost:3000/www/index.html就行了。



评论

暂无评论

在这里输入