安装npm、node.js

打开终端,可分别输入以下内容查看npm和node的版本号:

npm –v 
node –v

如果npm或者node并非最新版本或者没有安装,可以到nodejs官网下载最新版本,下载好后双击下载的pkg包默认安装即可。

安装ionic和cordova

  • 采用淘宝npm镜像避免国内网络安装错误,终端输入:

sudo npm set registry https://registry.npm.taobao.org

  • 下载后安装ionic和cordova包,终端输入:

sudo npm install -g cordova ionic

  • 安装成功后,查看安装的包内容是否全部都已安装,终端输入:

ionic info

根据信息提示,可对未成功安装的包再次安装。

项目生成

  • 进入桌面(或其他文件夹路径),终端输入:

cd ./Desktop

  • 生成文件项目,终端输入:

$ ionic start myApp tabs

ps:可以在项目名称后加上不同参数(blank、tabs、sidemenu), 其中blank等参数是几种app样式,可根据需要选择不同参数,不写的话默认是tabs样式;–v2是指按照ionic2的版本来创建项目,如果不写–v2则会创建ionic1项目。 
创建成功后,项目文件夹如图。

ionic搭建ios环境

  • 一般使用浏览器作为调试工具,cd到项目文件夹,终端输入:

cd myapp 
ionic serve

执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面,浏览器打开页面时Ionic已经给我们开启了livereload模式,开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面,我们就不用每次修改完毕手动刷新页面了。

  • Ionic支持两个平台iOS、Android,默认的Ionic项目并没有添加这两个平台,我们需要手动添加,终端输入:

ionic platform add android 
ionic platform add ios

问题1:

ionic搭建ios环境

解决办法:

sudo npm update -g cordova ionic

输入$cordova platform add ios继续报错:

 

ionic搭建ios环境

解决方法:

$ sudo chown -R $USER:$GROUP ~/.npm
$ sudo chown -R $USER:$GROUP ~/.config

项目编译

$ ionic cordova build ios

模拟器运行

$ ionic cordova emulate ios

报错:

ionic搭建ios环境

输入$ npm i -g native-run    不行,还是报错:

ionic搭建ios环境

输入$ npm install -g ios-sim,还是报错:

 

ionic搭建ios环境

输入

$ sudo npm install -g ios-sim

成功:

ionic搭建ios环境

继续输入$ ionic cordova emulate ios,报错:

ionic搭建ios环境

输入$ npm i -g native-run,并没有用,继续报错,

解决办法,输入

$ sudo npm i -g native-run

成功:

ionic搭建ios环境

输入

$ ionic cordova emulate ios

模拟器成功跑起来:

ionic搭建ios环境

 

参考链接:

https://www.runoob.com/ionic/ionic-install.html

https://blog.csdn.net/gaoqinghuadage/article/details/72844110

 

相关文章:

  • 2021-11-13
  • 2022-12-23
  • 2021-08-27
  • 2021-04-24
  • 2021-05-05
  • 2021-09-18
  • 2022-12-23
猜你喜欢
  • 2021-12-03
  • 2021-10-11
  • 2022-01-06
  • 2021-08-26
  • 2021-07-16
相关资源
相似解决方案