Mac下安装ionic和cordova,并生成iOS项目

来源：互联网发布：adobe dw软件序列号编辑：程序博客网时间：2024/05/16 15:40

http://www.jianshu.com/p/7a7abfa9f435

Mac下安装ionic和cordova,并生成iOS项目

作者 Springer 关注

2016.01.14 11:47* 字数 555 阅读 11017评论 25喜欢 12

为了开发HTML5,除了最新使用React Native等之外,目前首选的为稳定的ionic+Angularjs来开发iOS和android.
Ionic(ionicframework一款接近原生的HTML5移动App开发框架　会html css js就可以开发app
博客地址: http://blog.img421.com/

ionic中文教程讲解的很清楚,此网站翻译了一些原官网文档,而且也有诸多例子,让我们能够更好的学习.本教程讲述一下ionic、cordova安装的具体内容.

1. 安装npm 、node.js

1.1 打开`终端(Terminal)`,分别输入以下内容:

npm -v
node -v

如果npm或者node可能并非最新版本或者没有安装,可以到nodejs官网下载最新版本.

下载好后双击下载的pkg包默认安装即可。

2.安装ionic和cordova

2.1 因为某些原因,国内的网络安装ionic和cordova 会出现错误,因此要跳过某些墙。采用淘宝NPM镜像。打开终端直接输入以下命令即可。

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.2 通过淘宝NPM镜像就可以安装ionic和cordova包.

输入在终端中以下内容:

sudo cnpm install -g cordova ionic

**ps:等待时间可能会长,请耐心等候**

输出以上内容即可安装成功。

2.3 安装成功以后,要查看安装的包内容是否全部都已安装.运行命令:

ionic info

上图中所显示的Not installed代表未安装,安装方式即为红色给出的内容,照着内容安装即可以.

**ps:不安装的情况下就是不能在此环境下编译等,但是对于浏览器运行无影响.**

`ios-sim`代表模拟器运行环境,
`ios-deploy`代表真机运行环境。

**ps:博主只安装了模拟器环境**

3. 项目

3.1 项目生成

终端运行

//进入桌面
cd ./Desktop

//生成demo_1文件项目
ionic start demo_1

如果创建`iOS`应用,`终端`运行:

cd demo_1
ionic platform add ios (可能会需要sudo)
ionic build ios
ionic emulate ios //模拟器运行

生成的iOS应用会在`platforms`文件夹中显示。

ionic系列

关注Springer

写了 7078 字，被 79 人关注，获得了 84 个喜欢

更多内容在博客,http://blog.img421.com

写文章不易,且读且珍惜 ...

赞赏支持

喜欢

25条评论只看作者

按喜欢排序按时间正序按时间倒序

紫荆逸

2楼 · 2016.04.28 15:35

cordova总安装失败怎么办，
lyw:~ david$ cordova -v
/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:53
throw err;
^

Error: EACCES: permission denied, open '/Users/david/.config/configstore/update-notifier-cordova.json'
You don't have access to this file.

at Error (native)

赞回复

Springer： @紫荆逸你能看到Error: EACCES: permission denied, 这个是因为权限的原因。所以你在安装的时候要使用超级用户。sudo

2016.04.29 14:35 回复

添加新评论

33ea243f8ac7

3楼 · 2016.05.02 18:23

******************************************************
Dependency warning - for the CLI to run correctly,
it is highly suggested to install/upgrade the following:

Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova`

******************************************************
我的也是，一直报cordova,但是我已经安装上了，还是6.1.1版本的
ios:~ mac$ sudo cordova -v
Password:
6.1.1
怎么解决呀？

赞回复

Springer： @33ea243f8ac7 报Please install your Cordova CLI to version >=4.2.0 `npm install -g cordova` 这种npm install 说明你的node js版本过低,要去nodejs 官网下载https://nodejs.org/en/版本

2016.05.03 13:07 回复

Springer： @33ea243f8ac7 你可以使用 node -v 查看一下node 版本是不是 4.2.0以上

2016.05.03 13:09 回复

UIBing： @Springer 你好，我也报了一样的错，node版本也是最新的，6.2.0 还是提示这个问题，请问这个最后有解决吗

2016.06.07 16:02 回复

添加新评论还有1条评论，展开查看

Damon4Zhou

5楼 · 2016.07.14 11:41

这种框架对于iOS开发有什么好处呢？？？

赞回复

Damon4Zhou

6楼 · 2016.07.14 11:43

它是把js代码转换成了oc代码？？楼主讲下原理吧

赞回复

Springer： @Damon4Zhou ionic是一种老式的使用H5开发iOS和Android应用的方式,你也可以使用新的语言React Native开发,当然对于H5实现复杂的或者交互性没有那么好的,你就可以使用iOS和Android的插件实现

2016.07.14 13:49 回复

Damon4Zhou： @Springer 对于iOS，是不是app里面所有的页面都是webview，可以这么理解吗？

2016.07.14 14:55 回复

Springer： @Damon4Zhou 除了插件。其余的是。你可以使用Safari进行iOS模拟器 js调试

2016.07.14 15:12 回复

添加新评论还有1条评论，展开查看

Damon4Zhou

7楼 · 2016.07.14 15:05

sudo npm set registry https://registry.npm.taobao.org
sudo npm install -g cordova ionic

赞回复

童井神

8楼 · 2016.11.09 10:44

当进行到ionic start demo_1 时候下载
Installing npm packages...
npm WARN package.json ionic-project@1.1.1 No repository field.
npm WARN package.json ionic-project@1.1.1 No license field.
一直在下载状态，跟换了网络也不好使，这个该怎么处理啊。

赞回复

Springer： @童井神你gem update 后试一下

2016.11.09 16:58 回复

添加新评论

圆圆的兔子

9楼 · 2017.01.12 12:40

你好，请问一下。总是安装不了ios真机运行，只有simulator。。。系统提示之后出现
npm ERR! Please include the following file with any support request:
npm ERR! /Users/lijialu/npm-debug.log