安装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项目。
创建成功后,项目文件夹如图。
- 一般使用浏览器作为调试工具,cd到项目文件夹,终端输入:
cd myapp
ionic serve
执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面,浏览器打开页面时Ionic已经给我们开启了livereload模式,开启之后我们编辑www下的文件后保存时Ionic会通过websocket通知浏览器刷新页面,我们就不用每次修改完毕手动刷新页面了。
- Ionic支持两个平台iOS、Android,默认的Ionic项目并没有添加这两个平台,我们需要手动添加,终端输入:
ionic platform add android
ionic platform add ios
问题1:
解决办法:
sudo npm update -g cordova ionic
输入$cordova platform add ios继续报错:
解决方法:
$ sudo chown -R $USER:$GROUP ~/.npm
$ sudo chown -R $USER:$GROUP ~/.config
项目编译
$ ionic cordova build ios
模拟器运行
$ ionic cordova emulate ios
报错:
输入$ npm i -g native-run 不行,还是报错:
输入$ npm install -g ios-sim,还是报错:
输入
$ sudo npm install -g ios-sim
成功:
继续输入$ ionic cordova emulate ios,报错:
输入$ npm i -g native-run,并没有用,继续报错,
解决办法,输入
$ sudo npm i -g native-run
成功:
输入
$ ionic cordova emulate ios
模拟器成功跑起来:
参考链接:
https://www.runoob.com/ionic/ionic-install.html
https://blog.csdn.net/gaoqinghuadage/article/details/72844110