ionic3的安装、使用

时间:2024-03-16 12:31:35

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

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

    一、安装

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

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

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

            ionic3的安装、使用

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

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

            ionic3的安装、使用

    3、安装ionic

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

             ②安装最新版本npm install -g [email protected]

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

            ionic3的安装、使用

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

     ionic3的安装、使用

    4、安装cordova。npm install -g cordova

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

        ionic3的安装、使用

     二、创建项目

  1.创建项目。ionic start firstApp tabs

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

    ionic3的安装、使用

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

    ionic3的安装、使用

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

       ionic3的安装、使用

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

    ionic3的安装、使用

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

    ionic3的安装、使用

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

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

    好了,大家尝试一下吧。