ionic3的安装、使用

    现在我已经大三了，为了秋招的时候有拿得出手的作品，我们就组了一个小团队写一个社交方面的APP，在这个APP开发中我们的前端是使用了一个前端的框架ionic写的，但是在使用ionic的时候，需要对TypeScript，Angularjs有很好的基础。即使是有了基础，我们依然遇到了很多坑，比如视频资料比较少，并且大多又是英文的，对我们的开发有着不小的麻烦。但是由于使用ionic可以打包成安卓app和苹果app，同时也会解决不同尺寸屏幕下的兼容问题，所以我们舍不得舍弃ionic。

    所以我就写这一篇文章给那些初次使用ionic的同志们来参考，希望对你们有所帮助，我也是不希望我踩过的坑会掉下去更多的人。

    一、安装

    1、下载nodejs并安装（这里很简单，并没有什么难点，就不详细讲安装过程了。）

           下载地址：https://nodejs.org/en/

            打开cmd，输入node -v，如果出现如下结果就说明安装成功

            

    2、设置文件的下载源为淘宝镜像。npm install -g cnpm --registry=https://registry.npm.taobao.org/。由于我们国家的网络安全问题，就拦截掉了很多国外网站，如果我们不设置的话，默认是从https://registry.npmjs.org/下载，可能会失败，所以建议大家设置一下。（从第二点往下的都要求cmd是使用管理员身份打开）。

           配置完成之后可以使用npm config get registry来检测是否设置成功。

            

    3、安装ionic

             ①安装指定版本命令npm install -g [email protected]。

             ②安装最新版本npm install -g ionic@latest。

               安装完成时候可以输入ionic -v来检测是否安装成功，以及安装的版本。

            

                或者输入 ionic info来查看新系统一些环境。

     

    4、安装cordova。npm install -g cordova。

       安装完成之后同样可以使用cordova -v来检测。

        

     二、创建项目

  1.创建项目。ionic start firstApp tabs。

    创建完成后你就可以看到对应的文件夹下面有了你创建的项目。

    

    项目的目录结构。（这里我们遇到了一个很大的坑，可能是因为看的教程视频都是比较老的视频，所以版本有很大的差异，最大就体现在目录结构上面不一样，视频中比我们创建的多了一个hooks文件夹，以至于我们认为我们常见的项目少了东西，在这里停留了很大一段时间，下面我就给出比较新的项目的目录结构）

    

    到这里项目就创建成功了，页面的代码都在src下的pages文件夹下面。

       

   我们可以在让cmd进入到firstApp文件夹下面之后输入ionic serve来启动项目。（一定要注意目录）

    

    项目启动成功之后会自动在浏览器中打开。

    

    对应页面的样式在对应页面文件夹下面的*.scss文件中书写。

    全局样式在theme下的variables.scss中书写。

    好了，大家尝试一下吧。