鱼猫的个人博客上线啦！鱼猫的个人博客 欢迎点击查看哟！

---

最近看到有很多刚接触ionic的童鞋在问，有没有比较完整的教程能够借鉴，所以趁现在有点空闲的时间，把我自己的经验写下来，希望对一些新人有帮助，如果你已经熟练了ionic，可以忽略这篇文章，如果错误的地方，还望不吝斧正。

Android环境

第一步，安装node.js

首先，安装node.js，一般安装首页推荐的LTS版本，到node.js的官网下载就行了，不要怕因为不兼容啥的去安装那些版本太低的node.js，这样反而可能会导致后面创建或者打包的时候报一些奇奇怪怪的错。怎么安装我就不贴图了，现在都是傻瓜式安装，一直点下一步就行，除了安装选择安装目录的时候，可以不用它默认的安装目录，一般默认都是在c盘，我们可以选择安装在除c盘以外的其他盘。

注意，只要本教程提到的目录，包括安装目录解压目录这些，目录里面都不要包含有中文字符。

第二步，安装ionic以及cordova

win+R快捷键，打开运行窗口，输入cmd，回车，调出命令提示符，分别输入node -v、npm -v，回车， 看看有没有对应的node版本号以及npm版本号，如果有，说明第一步安装成功，接下来就是安装ionic以及cordova。

在命令提示符里面输入命令，npm install -g ionic cordova，回车，安装ionic以及cordova，-g表示全局安装，有时候会出现安装失败，大多数是跟网络有关，可以使用vpn加速，有些教程会说使用cnpm淘宝镜像，但我个人是不喜欢这样的，因为使用cnpm安装有时会导致后面打包报错，貌似是安装的时候少下了某些包，但有些人会出现这种情况，有些人不会，我就曾经使用cnpm安装，后面打包的时候出现了很多奇奇怪怪的错误，后来重新用回了npm，就可以了。个人不建议使用cnpm，当然如果你想用那也没办法，只能祈祷你能安装打包成功了。

输入命令后，回车，出现安装进度条，等安装结束后，命令行分别输入ionic -v、cordova -v，如果出现对应的版本号，说明安装成功。

这里提个醒，因为我电脑的环境是之前安装的，所以可能当你看到这篇文章的时候，ionic或者cordova已经更新了，使用上面那句命令行安装ionic和cordova的时候，默认都是安装最新版，像现在cordova就更新到了8.0.0，但我建议不要安装cordova8.0.0版本的，因为ionic有一些插件没有更新，不兼容到cordova，导致安装插件失败，最好就是安装7.0.0或者6.5.0的cordova版本，把上面的安装命令拆成两句，npm install -g ionic和npm install -g cordova@7.0.0，强制让它安装成7.0.0版本的

第三步，安装jdk并配置环境变量

到oracle的官网，下载jdk，安装，并配置环境变量，这步骤很简单，网站教程一收一大把，我就不详说了

jdk下载地址：下载地址

环境变量配置：java环境配置教程

第四步，下载Android SDK已经配置环境变量

这一步，说麻烦也麻烦，说不麻烦也是不麻烦，因为很多人就是在这一步上面徘徊了很久，这里跟大家推荐一篇教程，我之前就是根据这篇教程配置并且配置成功的

Android SDK下载并配置教程：教程

这篇教程并不是单一的介绍如何配置Android SDK，我们只需要找到相关的地方就行了， 其他可以忽略不看

第五步，下载gradle并配置环境变量

这一步相对来说就比较简单了，下载对应的压缩包，我们这里下载的压缩包是gradle-4.0-all.zip，解压到任意不包含中文字符的路径，然后配置一下环境变量就行了。

gradle下载地址：下载地址

环境变量配置教程：配置教程

这时候，到这里，android的环境就已经配置好了。

mac环境

mac配置ionic环境就比较简单了，由于我用的不是mac，所以这里简单说一下就行了

第一步，安装node.js环境

这一步跟上面的第一步一样，也是下载首页的TLS版本，然后直接安装就行，之后node -v、npm -v验证时候安装成功

第二步，安装ionic、cordova

在mac下，也是安装cordova7.0.0版本比较好，原因我上面说了，没看到的可以跳上去看一下，不过mac的安装命令可能有点不一样，要使用超级管理员模式，sudo npm install -g ionic，sudo npm install -g cordova@7.0.0，使用sudo命令，会提示你输入管理员密码，也就是你开机的时候输入的那个密码，之后的都一样，等待安装进度条消失，然后验证版本号看看是否安装成功。

第三步，安装xcode

mac打包ionic，最好就是使用xcode打包，在apple store里面下载xcode，它会自动帮你安装，之后打开xcode，登录你的开发者账号，然后去苹果官网配置你app相应的证书，就可以打包真机测试了。

ionic相关命令（使用频率高）：

创建项目：ionic start xxxx tabs/blank/sidemenu/super/conference/tutorial/aws （一般是tabs居多，或者sidemenu）

添加平台：ionic cordova platform add android/ios

移除平台：ionic cordova platform remove android/ios

查看插件列表：ionic cordova plugin ls

移除某插件：ionic cordova plugin remove xxxx

编译项目：ionic cordova build android/ios

添加新页面：ionic g page xxxx

添加新组件：ionic g component xxxx

添加新管道： ionic g pipe xxxx

添加新指令：ionic g directive xxxx

添加新服务：ionic g provider xxxx