美文网首页我的ionicionic3+ionic学习笔记
【开发指南】(一)Ionic3开发环境配置

【开发指南】(一)Ionic3开发环境配置

作者: IT晴天 | 来源:发表于2017-08-11 19:39 被阅读486次

    工欲善其事,必先利其器,搭好环境是开发的前提,有时环境没弄好,不时报错往往很扎心。

    常规ionic的环境搭建如下:

    一、安装nvm——可选,中文意思是“node版本管理器”

    node是ionic必要的环境,而node个别版本差别有点大,如6.x和9.x,ionic项目对node版本有要求,为了便于管理node,建议安装nvm,装完后就可以命令行调用命令,如nvm alias default 6.10.3 && nvm use default

    $ nvm ls

    ->      v6.10.3

            v9.5.0

            system

    default -> 6.10.3 (-> v6.10.3)

    node -> stable (-> v9.5.0) (default)

    stable -> 9.5 (-> v9.5.0) (default)

    二、安装node(含npm)——必须

    安装完我们常会用到以下命令:npm install -g 模块 或者 npm install 模块 ,有-g表示全局安装,没有-g表示当前项目安装

    输入npm -v打印版本,检查npm是否安装成功,同样的,后续说明的nrm -v,ionic -v,cordova -v也是用于检查是否安装成功。

    三、安装nrm——可选,但强烈推荐,中文意思是“node源管理器”

    执行以下命令即可:

    npm install -g nrm

    为什么装nrm?因为我们开发过程中经常需要用到npm,而在使用npm时,受网络影响大,官方的源下载npm包会比较慢,而且可能出现异常,这个时候有几种方式处理:

    1、可以选择vpn来翻墙处理,然而这种方式不太方便,连接情况也不太保障;

    2、使用cnpm,淘宝把npmjs.org在国内做了个镜像,封装了新的cli,其用法跟npm用法完全一致,只是在执行命令时将npm改为cnpm。其目的是好的,只是封装过度,安装下载完的依赖包文件格式和npm的不一样,用了@和链接文件夹关联文件等,会常常导致有权限和关联包下载不全问题。

    3、直接用npm,但给它设置代理,如代理地址映射到淘宝的源,像下面这样:

    npm install ionic -g --registry=https://registry.npm.taobao.org

    或者写入配置(以下命令二选一):

    npm config set registry https://registry.npm.taobao.org

    npm --registry https://registry.npm.taobao.org

    4、使用nrm,nrm是在第3点的基础上做了一个优化,它是用于管理npm的源切换,它内部集成来几个常用的npm源,这样,当像第3点使用淘宝源有问题时,可以很方便的切换到其它源,而不需要记住一堆源的地址,甚至可以添加自己的npm源。

    装完nrm后,正常使用npm即可,当执行npm命令时觉得慢,就用nrm命令use切换一下源

    nrm主要使用ls和use命令

    1)nrm ls是列出来现在已经配置好的所有的源地址;

    nrm ls

    npm ---- https://registry.npmjs.org/

    * cnpm --- http://r.cnpmjs.org/

    taobao - http://registry.npm.taobao.org/

    nj ----- https://registry.nodejitsu.com/

    rednpm - http://registry.mirror.cqupt.edu.cn

    npmMirror  https://skimdb.npmjs.com/registry

    2)nrm use是切换到哪个源上;

    nrm use taobao

    3)nrm add添加源;

    4)nrm del删除源;

    5)nrm test测试源的响应时间,可以作为使用哪个源的参考。

    有兴趣可以网上搜索下nrm的文章,其中上述nrm内容引用自:http://www.jianshu.com/p/5dd18d246281

    四、安装ionic(cli)——必须

    npm install -g ionic

    注意:很多时候,很多人以为这样安装了ionic,就是安装了ionic的核心框架,其实不是,把ionic-cliionic-angular混为一谈了,这里装的是ionic-cli,是为了便于我们开发编译部署ionic项目的命令行,而ionic-angular其实才是我们常说的ionic框架,每次修复bug、更新功能指的就是它,在package.json里可以查看版本和相关依赖(也可以项目目录敲npm list ionic-angular)。两者的版本并不是一致,有时候ionic-angular更新了多个版本,而ionic-cli不需要更新,而ionic-cli一般是bug修复、提高命令执行的性能,或调整ionic项目结构时才需要更新。

    五、安装cordova——混合式应用必须,web版可选

    npm install -g cordova

    与ionic-cli一样,其实也是cordova-cli,用于管理cordova插件的。

    注意:现在ionic-cli涉及原生相关的命令都会带上cordova,如下面命令

    ionic cordova build android

    但是有人会省掉ionic,变成这样:

    cordova build android

    其实这样也是能执行,但是操作就完全不同了!cordova build的,是把www目录打包为原生应用,而ionic cordova build,是先执行基于ionic配置的一系列编译压缩打包命令把src源码生成www目录,再执行cordova build的概念。

    六、安装Git(cli)——可选,但强力建议

    因为很多开源资源是放在git上的,有时它们不完全满足自己的需求,这时可以克隆下来做微调然后使用本地安装使用。

    七、(JDK & android SDK)/xCode——可选,前者android,后者ios

    一般直接下载,也可以安装android studio来实现SDK下载管理(为了方便调试android原生代码,建议此种方式),两者完成后配置环境变量,不过,现在新版ionic-cli使得上述方式不是必须的,在ionic执行platform添加android时,检查到环境变量没有配置,就会自动下载安装配置android环境,最后可以输入adb 来简单验证环境配好没。

    其中,window不能开发ios,如果要开发和调试ios,要装苹果系统(Mac、黑苹果、虚拟机等等),而苹果系统基本可以开发各个平台。


    当上述完成,你就可以进入ionic的寻坑之旅了。

    相关文章

      网友评论

      本文标题:【开发指南】(一)Ionic3开发环境配置

      本文链接:https://www.haomeiwen.com/subject/waerrxtx.html