ionic开发介绍之环境搭建

时间:2022-12-11 22:48:11

开发环境搭建

安装Node.Js。用于安装各种开发工具做准备;

安装ionic构架和cordova库,这里分开安装ionic和cordova是因为墙的不稳定的影响,通常不能一步就安装成功。因此建议分开安装,对于墙来说对于技术网站其实不太屏蔽,在情况好的情况下不影响正常安装。当然如果你安装的时候确实遇到了困难,可以考虑淘宝的npm服务器或者翻过这堵墙。对于应用程序员来说这是基本技能。本文章所描述的步骤都是在Windows操作系统下完成。本人体验实际安装中ionic不太容易成功。经验:下载过程比较难受,有时候命令行一点都不动,不知道实事上还在下载没有,这时候可以打开“任务管理器”选择“性能”然后点击下方的“资源管理器”查看“网络”选项卡里面的网络访问情况,其中node的那一行就是node下载的速度,从接收速度可以看到下载的情况,若果命令在执行,但在此处没有看到有node的那一行说明下载失败了。总是失败就该考虑墙的问题了。(搭建安装环境简直就是煎熬,尤其第一次,无从下手,对于墙如果感觉无从下手,或者不想折腾,建议开始花钱买一个vpn,任何事物存在都是有原因的)

安装ionic构架

打开命令行执行:

npm install –g ionic            //其中-g代表安装ionic到计算机系统,而不是仅仅给当前目录的项目

安装cordova库

npm install –g cordova        //其中-g代表安装ionic到计算机系统,而不是仅仅给当前目录的项目

 

接下来就要利用安装好的开发环境开发ionic项目,注意执行一下命令请在管理员权限打开命令行来执行。

创建一个名字叫做demo的项目

ionic start demo

运行以上命令就会在命令执行目录创建一个demo的工程文件夹,命令会下载一个工程模板。下载的时候容易费劲,按本文开头的介绍解决问题,多试几遍。成功后提示如下:ionic开发介绍之环境搭建

此时运行命令 cd demo 切换到生成的工作目录,然后执行命令:ionic serve 即可在浏览器查看ionic app的效果。

ionic开发介绍之环境搭建

此时项目目录包括一下图的文件

ionic开发介绍之环境搭建

如果你之后大算运行此程序在Android后iOS的时候,你需准备好要其各自平台的开发环境,本人是使用与Android的开发环境,需要准备Java,Apache Ant,Android SDK 并且在Windows环境变量里分别设置路径。具体执行性参考其他作者的文章。

在Android开发环境准备好的情况下,即可执行如下命令来加入Android开发平台。

ionic platform add android  

然后编译Android平台下测的demo的项目,运行如下命令:

Ionic build android 编译生产apk文件

然后执行 下载命令在手机上运行

ionic run android

或者执行仿真命令在Android虚拟机上安装并运行程序

ionic emulate android

增加后Android平台后项目文件夹下多了plagforms文件夹

ionic开发介绍之环境搭建

在整个开发环境搭建中或由于各种原因引起各种问题,在实践中多查找相关问题的博客来解决问题。

 

相关文章