MAC OSX环境下cordova和ionic的安装配置

来源:互联网 发布:数据分析师是什么专业 编辑:程序博客网 时间:2024/04/30 01:45

之前的项目中用到了angularjs+cordova+ionic,当时用的是win7系统,搭建的也是Android的环境,现在换了家新的公司发现需要在mac 上搭建开发环境。刚开始结束mac系统,所以不是那么熟悉,经过查找资料终于把环境搭建成功。下面就来给大家介绍一下搭建流程:

cordova

1.查看mac上是否已安装了xcode(ios的集成开发环境),可以在AppStore里面下载安装。

2.安装cordova之前要安装nodejs,会包含npm安装(npm是个包管理器),可以在官网上下载nodejs的mac OSX版安装包。然后双击,下一步下一步···,osx会自动添加环境变量,不用手动配置,mac上会默认安装到 usr/local/bin下,也可以更改目录。

ll //可查看usr/local/bin 下面已安装的内容
node -vnpm -v   //可查看已安装的nodejs,npm的版本号

3.然后就可以安装cordova了(git不用安装,osx和Linux都自带git,可以在命令行输入git -v即可查看)

sudo npm install -g cordova //安装cordova//有时候网络不好,可能会安装失败,需要使用代理npm config set registry http://registry.cnpmjs.org //配置代理//然后再安装cordovasudo npm install -g cordova //-g代表全局安装,即可以供多个项目使用 sudo是因为使用root权限,需要管理员密码

4.输入命令行测试是否安装成功

cordova -v

5.测试

1)创建一个空白文件夹名为test
这里写图片描述
2)在命令行输入以下命令

//1.创建一个cordova项目/** *hello1:你的项目文件夹名称, *com.example.hello1:你的项目内部包名 *HelloWorld1:项目名称,打包出的安装程序安装后显示的名称 */cordova create hello com.example.hello HelloWorld//2.进入hello项目cd hello//3.添加IOS平台cordova platform add ios//4.build 项目cordova build ios//5.启动ios模拟器cordova emulate ios

这里写图片描述
此时查看hello文件夹
这里写图片描述

cordova环境搭建成功
注:这时模拟器默认得是iPhoneSE,如果想更换模拟器的手机版本,可以在命令行输入下面代码:

cordova emulate ios --target iPhone-6s //模拟器版本为iPhone-6s

这里写图片描述

Ionic

1、安装ionic

sudo npm install -g ionicionic -v //查看版本号 sudo npm install -g ios-sim //ios-sim 将app项目添加到ios模拟器ionic start --v2 myApp tabsionic serve

ionic 配置成功
这里写图片描述

0 0
原创粉丝点击