临时项目需要使用AngularJS+Ionic+Cordova技术,半年前跟别人用过一段时间做过几个页面,目前别人已经无法联系了,只能我自己上了。
上次做完项目后,想抽时间好好巩固一下这方面的知识面来,后来其他项目忙起来就给扔下,主要原因还是懒啊,其实有好多的技术排着队等着好好研究呢,就是懒啊。

开发第一步,需要先把开发环境搭建起来。

1.开发IDE

选择VS Code,官方下载地址:https://code.visualstudio.com/ 。下载完成后,根据安装步骤一步步完成即可。

2.安装NodeJS

官网下载最新稳定版本,下载地址:https://nodejs.org/en/ 。下载完成后,根据安装步骤一步步完成即可。

安装完成后,打开系统cmd,输入node –v,若能够获取到对应的版本号,则完成安装。

3.安装Ionic

在VS Code中,打开终端控制器(快捷键:Ctrl+~),输入命令:npm install –g ionic。提示安装完成后,输入命令:ionic –version 可查看对应的版本。

4.安装Cordova

VS Code的终端控制器中,输入命令:npm install –g cordova。提示安装完成后,输入
命令:cordova –version 可查询对应的版本。

5.创建项目

通过打开文件夹操作,设定工程目录,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”即可。接下来就需要等待项目创建完成即可。

6.浏览器运行项目

项目创建完成后,在VS Code的终端控制器中,通过cd命令进入到项目目录,然后执行ionic serve,接下来执行项目编译过程,并自动打开浏览器,进入到http://localhost:8100/的页面。创建的Tabs项目的实际运行效果图如下:

AngularJS+Ionic开发-1.搭建开发环境的更多相关文章

  1. Ionic 2 + 手动搭建开发环境教程 【转】

    ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃. ngCordova,将主流 ...

  2. Window上python 开发--1.搭建开发环境

    事实上在开发python最好在ubuntu环境下,简单也便于扩展各个package.可是我的linux的电脑临时不在身边.还的我老婆的电脑win7没办法啊. 因为python的跨平台性.在window ...

  3. 智龙开发板搭建llsp环境

    智龙开发板搭建llsp(linux+lighttpd+sqlite3+php)环境 1. 准备 1. 智龙开发板V3 2. 软件编译环境:VirtualBox6+CentOS6.10-i386.min ...

  4. 开发工具--搭建python环境

    工具|搭建python环境 实现python2版本与python3版本的环境搭建. 正文 1.Python下载 官网: www.python.org 下载: ( 64位3.5.2Windows x86 ...

  5. Android开发学习——搭建开发环境

    在学校开课学习了android的一些简单的UI组件,布局,四大组件学习了2个,数据存储及网络通信,都是一些简单的概念,入门而已.许多东西需要自己去学习. 学习一下 Android开发环境的搭建,两种方 ...

  6. SpringBoot+SpringCloud+vue+Element开发项目——搭建开发环境

    1.新建一个项目

  7. angularJS学习笔记之——搭建学习环境

    学习AngularJS已经好几天了,从今天开始学习AngularJS环境搭建. 无论是Mac.Linux或Windows环境中,您均可遵循本教程学习编程. 第一步:安装Git Git是什么呢? Git ...

  8. Cordova+Angularjs+Ionic 混合开发入门讲解

    作为一名学习Android开发的学生,对于移动开发的发展趋势颇为关注,大家都知道,现在原生的移动开发在企业上基本很少使用了,大部分企业为了降低成本,选择了webapp,hybrid(混合开发)这两种模 ...

  9. 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo

    目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点,越来越流行. Cordova就是一个中间件,让我们把WebAPP打包成Hybrid ...

随机推荐

  1. Webview窗口设置遮罩层

    在Webview窗口中如果存在子Webview的情况下,使用html中的css来做页面遮罩无法覆盖子Webview,为了解决此问题,WebviewStyle对象添加mask属性,用于设置Webview ...

  2. 2019.02.12 bzoj5294: [Bjoi2018]二进制(线段树)

    传送门 题意简述: 给出一个长度为nnn的二进制串. 你需要支持如下操作: 修改每个位置:1变0,0变1 询问对于一个区间的子二进制串有多少满足重排之后转回十进制值为333的倍数(允许前导000). ...

  3. python模块:hmac

    """HMAC (Keyed-Hashing for Message Authentication) Python module. Implements the HMAC ...

  4. Avoid Inputing Password While Pushing/Pulling Git Project

    If we add public key in our git account, we can pull/push project easily without password. However, ...

  5. 用嵌入式块RAM IP核配置一个双口RAM

    本次设计源码地址:http://download.csdn.net/detail/noticeable/9914173 实验现象:通过串口将数据发送到FPGA 中,通过quartus II 提供的in ...

  6. 第 1 篇 Scrum 冲刺博客

    各个成员在 Alpha 阶段认领的任务 姓名 Alpha 阶段认领的任务 徐婉萍 创建服务器.域名,环境搭建查询界面及页面的设计,查询方法的编写 谭燕 支出.收入添加界面及设计,收入.支出的方法编写, ...

  7. Android开发工程师文集-相关控件的讲解,五大布局

    前言 大家好,给大家带来Android开发工程师文集-相关控件的讲解,五大布局的概述,希望你们喜欢 TextView控件 TextView控件有哪些属性: android:id->控件的id a ...

  8. python实现快速排序算法

    快速排序算法又称划分交换排序(partition-exchange sort),一种排序算法,最早由东尼·霍尔提出.在平均状况下, 排序n个项目要O(nlogn)次比较.在最坏状况下则需要O(n*2) ...

  9. [宏]preempt_disable

    //include/linux/preempt.h #ifdef CONFIG_PREEMPT_COUNT //如果内核支持抢占 do { \ inc_preempt_count(); \ barri ...

  10. [EXP]Memu Play 6.0.7 - Privilege Escalation

    # Exploit Title: Memu Play - Privilege Escalation (PoC) # Date: // # Author: Alejandra Sánchez # Ven ...