临时项目须要使用AngularJS+Ionic+Cordova技术,半年前跟别人用过一段时间作过几个页面,目前别人已经没法联系了,只能我本身上了。
上次作完项目后,想抽时间好好巩固一下这方面的知识面来,后来其余项目忙起来就给扔下,主要缘由仍是懒啊,其实有好多的技术排着队等着好好研究呢,就是懒啊。
开发第一步,须要先把开发环境搭建起来。
node
选择VS Code,官方下载地址:https://code.visualstudio.com/ 。下载完成后,根据安装步骤一步步完成便可。npm
官网下载最新稳定版本,下载地址:https://nodejs.org/en/ 。下载完成后,根据安装步骤一步步完成便可。
安装完成后,打开系统cmd
,输入node –v
,若可以获取到对应的版本号,则完成安装。
浏览器
在VS Code中,打开终端控制器(快捷键:Ctrl+~
),输入命令:npm install –g ionic
。提示安装完成后,输入命令:ionic –version
可查看对应的版本。
app
VS Code的终端控制器中,输入命令:npm install –g cordova
。提示安装完成后,输入
命令:cordova –version
可查询对应的版本。
ionic
经过打开文件夹操做,设定工程目录,VS Code的终端控制器中,输入命令:ionic start
。提示你输入工程名称,键入工程名称后,会让你选择项目模板,分别有tabs、blank、sidemenu、super、conference、tutorial、aws。经过键盘上下键选择须要的模板,按下Enter便可,建立过程当中会提示“Would you like to integrate your new app with Cordova to target native iOS and Android?”(意思是是否将Cordova程序整合到原生的IOS或Android中),通常状况选择“N”便可。接下来就须要等待项目建立完成便可。ide
项目建立完成后,在VS Code的终端控制器中,经过cd命令进入到项目目录,而后执行ionic serve
,接下来执行项目编译过程,并自动打开浏览器,进入到http://localhost:8100/的页面。建立的Tabs项目的实际运行效果图以下:code