如何在mac安装cordova ionic

1

首先需要安装好node.js（网上教程很多）

这是为了使用npm来安装ant，cordova，ionic

验证是否安装好node.js的方法是在命令提示符中输入“node -v”

若出现版本号，证明安装成功。

2

下载jdk，并配置java环境（网上教程很多）

验证是否安装好的方法是在命令提示符中输入“javac”

若出现如让乱下内容，证明安装成功。

3

安装ant,并配置相应的环境（网上搜教程）

验证是否安装好ant的方法是在命令提示符洞李中输入“ant -v”

若出现版本号，证明安装成功。

4

现在纳滑迟就可以安装cordova了，根据下图一步一步来就好了，官网有，可以自己搜下；

验证是否安装好cordova的方法是在命令提示符中输入“cordova -v”

若出现版本号，证明安装成功。

5

接下来是安装成功ionic的重要一步了，就是安装express,

cmd 输入：npm install express

等待一会即可

6

接下来就可以安装ionic了，也是按下图，或是去官网查看步骤

注意：如果按步骤执行到最后三步，发现出错，请先安装android sdk

或者可以直接省略最后三步（即只用执行到 cd myApp），在命令提示符中输入“ionic serve”

直接在浏览器中查看效果；

7

验证是否安装好ionic的方法是在命令提示符中输入“ionic -v”

若出现下图，证明安装成功。

END

应用过程中遇到的一些问题解决办法

1

升级cordova命令

调用语句 :windows用户npm update -g cordovamac系统的用sudo npm update -g cordova查看cordova信息npm info cordova 查看cordova 版本cordova -v查看cordova命令cordova help

END

注意事项

配置环境变量时，用英文状态下“”把要添加的路径与前面有的隔开；

所有的命令都是在命令提示符中进行的，在输入命令时，别把“$”也一块输进去~

如果前面都实现了，但是ionic还是安装失败，多半是网络问题；

官方文档： Installing Ionic - Ionic Documentation

1.删除旧版本ionic

npm uninstall -g ionic

2.安装新版本

npm install -g @ionic/cli

值得注意的是，ionic的资源包变为了ionic/cli

在cmd或终端进入合适的目录，然后运行命令：

ionic start 项目名称 tabs

然后选择项目类型（Angular、React、Vue），这里选择的是Angular，回车

大概意思是是否集成capacitor，这里暂时卜李先选NO，等待安装node_modules

是否创建ionic账号，选择NO，项目创建完成，然后进入创建的项目目录下，输入命令启动服务：

ionic serve  

启动成功！

3-1-1 添加安卓平台

ionic capacitor add android

没有www文历源件。尝试运行一下ionic build，然后再次运行添加平台命令，项目中多了android文件夹

因为官方并没有提供直接打包的命令，需要借助android studio来打开安卓项目，在项目中运行命令：

npx cap open android

这样直接启动android studio并打开该安卓项目

对于android studio的安装和android_SDK以及安卓模拟器的配置可以自行了解学习一下，我这里是已经搭建好的安卓开发环境。

点击运行按钮，就可以在模拟器上运行该程序

每次对ionic项目做更改需要把这些更新同步到安卓项目中，需要运行命令：

ionic capacitor copy android

3-1-2 添加iOS平台

在项目目录下运行命令： 

ionic capacitor add ios

报错了，大概是因为cocoapos没有安装或者版本过低，尝试更新一下cocoapos

打开终端，输入sudo gem install cocoapods来升级CocoaPods；

如果遇到

ERROR: While executing gem ... (Gem::FilePermissionError)

You don't have write permissions for the /usr/bin directory.

这个错误的话就改用sudo gem install cocoapods -n /usr/local/bin命令即可。

接下来型烂迟删除ios文件夹，重新添加ios平台，

根据提示，用xcode打开该ios项目

npx cap open ios

点击运行按钮，在iOS模拟器上查看效果

使用cordova添加平台和以前的ionic版本是一样的，首先尝试添加一下android平台:

ionic cordova platform add android

发现报错了，提示在capacitor的项目中不可以使用cordova，如果使用cordova需要禁用capacitor：

ionic integrations disable capacitor

禁用成功。

再次添加安卓平台，提示是否集成cordova，输入y

然后又又又报错了。

这是什么鬼，以前用cordova添加平台没有遇见过，我猜测可能是跟capacitor添加的android文件冲突，于是删除android文件夹再试一次。

果然添加成功！

再尝试一下cordova能不能打包成功:

ionic cordova build android

打包也成功了。

接着又尝试了一下用cordova添加和打包iOS，跟处理android平台的方式一样，先把ios文件夹删除，再进行添加和打包 *** 作，都成功了。

事实证明，新版的ionic版本既可以集成最新的capacitor，也兼容集成cordova。

---