1ionic简介

为什么选用ionic:

1.     彻底开源且免费

2.     性能优异

3.     基于红的发紫的AngularJs

4.     漂亮的UI

5.     强大的命令行(基于更热门的nodejs)

6.     开发团队非常活跃

7.     ngCordova,将主流的Cordova API或者Cordova插件封装为AngularJS扩展,使用非常方便

8.     开源免费的webfont icon库ionicons,基本满足你icon需求

2、相关下载:

Node.js(npm安装工具) :  https://nodejs.org/en/

jdk (android编译依赖)  :  http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

android (ADK编译): http://www.androiddevtools.cn/

Sublime text插件:http://www.sublimetext.com/

WebStorm 开发工具:https://www.jetbrains.com/webstorm/download/#section=windows

ionic2.x开发工具建议: Webstorm(开发) + Ant (打包)

注意事项建议所有程序管理员运行包括cmd androidsdk避免莫名的问题如sdk打不开cmd某些命令不能执行。

大致步骤(注意安装顺序):安装node.js - 安装jdk - 安装android(adk) – 安装apache ant - 命令安装ionic - 创建项目 - 编译项目apk

3、安装Node.js

3.1 nodejs简介

3.1.1 为什么要选用nodejs?

 

3.1.2 nodejs 下载以及说明

 首先在我们官网下载Nodejs的安装包进行安装:https://nodejs.org/en/

V6.10.0 LTS(9.75MB)——长期支持版,成熟稳定

V7.7.3 Current(9.75MB)——现在最新版本,最新特性、不稳定 作为新手不用纠结,随意选一个下载即可。

3.1.2 开始安装nodejs

(1) 下载完后进行nodejs安装.可自定义安装,默认是安装在C:\Program Files\nodejs

点next进行安装(注意避免中文目录)

在命令行cmd控制行

输入:node –v,控制台将打印出:v7.7.2  提示安装成功。

这样,常规NodeJS的搭建到现在为止已经完成了,迫不及待的话你可以在cmd命令行中键入“node”进入node开发模式下,输入你的NodeJS第一句:”hello world“ – 输入:console.log(‘hello world’)。这里就不再多作演示了。

该引导步骤将node.exe 文件安装到C:\Program Files\nodejs\目录下,并将该目录添加进path环境变量

注意:环境变量中path的nodejs路径决定你安装后的目录路径

(2)  npm 详解

npm作为一个NodeJS的模块管理,之前我什么都不懂,从网上找各种安装教程,弄的五花八门,走了很大的弯,现在将其整理出来,方便各位网友查看。

①、我们要先配置npm的全局模块的存放路径以及cache的路径,例如我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立”node_global”及”node_cache”两个文件夹。如下图

②、启动cmd,输入

npm config set prefix "C:\ProgramFiles\nodejs\node_global"

npm config set cache "C:\ProgramFiles\nodejs\node_cache"

③、现在我们来装个模块试试,选择express这个比较常用的模块。同样在cmd命令行里面(管理员权限运行cmd),输入

npm install express –g

(“-g”这个参数意思是装到global目录下,也就是上面说设置的“C:\Program Files\nodejs\node_global”里面。)。待cmd里面的安装过程滚动完成后,会提示“express”装在了哪、版本还有它的目录结构是怎样。如下图

④、关闭cmd,打开系统对话框,“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。如下图

⑤、进入环境变量对话框,在系统变量下新建”NODE_PATH”,输入”C:\ProgramFiles\nodejs\node_global\node_modules“。(ps:这一步相当关键。) 
2014.4.19新增:由于改变了module的默认地址,所以上面的用户变量都要跟着改变一下(用户变量”PATH”修改为“C:\Program Files\nodejs\node_global\”),要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。

⑥、以上步骤都OK的话,我们可以再次开启cmd命令行,进入node,输入“require(‘express’)”来测试下node的模块全局路径是否配置正确了。正确的话cmd会列出express的相关信息。如下图(如出错一般都是NODE_PATH的配置不对,可以检查下第④⑤步)

OK,这样就搞定了,只要配置好之后,通过管理员权限安装模块就可以很好管理目录了。

⑦、查看npm 版本号:

3、安装JDK(androidSDK需要的

 

3.1 下载完jdk后,点next进行安装(注意避免中文目录)

3.2 安装后cmd执行java -version看到版本就是安装成功了(无需设置path)(我这里的版本是jdk1.8)

4、安装androidSDK 

4.1 sdk下载

  开发android的道友,肯定都听说过这玩意。大家可以在http://www.androiddevtools.cn/上进行下载相应版本。

  下载完后,点next进行安装(注意避免中文目录)

4.2  设置环境变量全局访问android

  我的电脑 - 右键属性 - 高级系统设置 - 环境变量

  新建变量名              变量值 
ANDROID_HOME     D:\ionic\androidsdk(你sdk的路径)

  然后在path里添加(注意前面的分号  
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

  执行android -h看到命令即安装设置成功

注意:执行androidsdk目录下的SDK Manager.exe即可打开工具包 如果遇到打不开的情况请用管理员运行!!!

配置AndroidSDK 国内无法访问google服务器所以列表是空的需要配置镜像 
选择Tools - Options 打开设置界面

填入mirrors.neusoft.edu.cn 端口80

并勾选 “Force https://... sources tobe fetched using http://...单击Close关闭”

依次选择Packages - Reload(或者重新打开)

这里千万注意只需要勾选3Android SDK Platform-toolsAndroid SDK Build-toolsAPI23下的SDK Platform (编译的时候会提示你需要的api版本,目前是API23) 
如果你勾选了其它的,可能要下载2、30G的东西。像我这样选只需要下载200M

附加:项目集成Crosswalk需要勾选Extras下的Android Support Repository和Google Repository否则会报错

接受 - 安装

安装完的列表 新版ionic只需装23,如果编译遇到错误就安装API 22的platform

5、安装 Apache ant 

5.1 下载ant

ant下载地址: http://ant.apache.org/bindownload.cgi

5.2  下载安装完后进行配置环境变量

Windows下ANT用到的环境变量主要有2个: ANT_HOME 和 PATH。

eg:
1. 设置ANT_HOME指向ant的安装目录(系统变量)。 
设置方法:ANT_HOME = D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6

2. 设置bin和lib目录到PATH变量中(用户变量)。将%ANT_HOME%\bin; %ANT_HOME%\lib添加到x变量的path中。 
设置方法:PATH = %ANT_HOME%\bin; %ANT_HOME%\lib

安装如果不成功可以把%ANT_HOME%换成真实的路径。

如:    D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\bin;D:\dev\apache-ant-1.9.6-bin\apache-ant-1.9.6\lib

安装完成以后在cmd中输入 ant -version 验证是否安装成功。

6、下载安装ionicdemo 本地、创建/编译项目 

1.使用npm下载ionic模板项目下载到本地。中间会有一些问询,比如是否使用sass.app的命名等。

npm install -g  cordova ionic

执行 cordova ionic 命令、运行下面的命令来确认它们被成功安装:

cordova (当前最新版本为v6.5.0)

ionic (当前最新版本为v2.2.1)

1、开始创建项目(以管理身份进行运行Node.js command prompt)

环境搭建完毕,现在开始创建项目编译APK

这里可以指定目录下进行创建项目

ionic start myionictest tabs(创建过程y/n询问是否打开官网n即可)

查看创建的目录文件夹

myionictest 就为项目名称,进入myionictest 这个文件夹:

cd myionictest

2. 添加android平台:

ionic platform add android

3. 生成android apk:

ionic build android

查看生成apk 目录

现在我们可以运行ionic server预览下项目

现在我们可以运行ionic server预览下项目、显示如下已经搭建好了一个移动混合式app ionic 框架

此步骤说明(如果此过程下载本地不了建议通过以下这种方式把gradle-2.2.1-all.zip下载下来配置):

附加gradle官网链接下载、根据ionic对应gradle版本下载即可

gradle 下载链接:http://services.gradle.org/distributions/

4. 在android模拟器或真机中模拟:

ionic emulate android

5、其中3和4可以合并为:

ionic run android

即生成apk,并在模拟器或真机中模拟。

6、更新ionic等

a.更新cordova及ionic包

npm update -g cordova ionic

b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:

ionic lib update

7.展现ionic项目结果(显示在ios和Android上的样式)

ionic serve --lab

说明:运行emulate/run命令的时候会在platforms目录下生成apk.

在执行platform和emulate命令的过程中如果出现报错大多是因为android环境没有安装完全导致的。请在cmd中输入android打开android SDK manager检查相关的包是否已经安装完全。

一般来说,tool和emulator都是必须要安装的.然后选择某一版本的android API进行安装。

常用命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org(npm镜像源指向淘宝) 
cnpm install -g cordova ionic(安装cordova ionic) 
cnpm update -g cordova ionic(更新cordova ionic) 
ionic -help(查看帮助) 
ionic -v(查看版本)

ionic start myionictest blank(空项目) 
ionic start myionictest tabs(带导航条) 
ionic start myionictest sidemenu(带侧滑菜单)

ionic platform add android(添加android平台) 
ionic platform remove android(移除android平台) 
ionic build android(编译项目apk) 
ionic emulate android(运行项目apk 手机连接在手机运行模拟器连接在模拟器运行) 
ionic run android (相当于build + emulate) 
ionic serve(开启服务调试)

转载于:https://www.cnblogs.com/hedengyao/p/ionic2.html

ionic2.x 手动搭建开发环境教程分享(nodejs,jdk,ant,androidsdk)相关推荐

  1. 最适合新手的手动搭建wamp环境教程

    最适合新手的手动搭建wamp环境教程 本来还想在博客上再发一篇教程,  但是实在是不想再写一次了,   所以就给大家下载链接吧 希望能够帮助到大家!!! 教程下载地址: http://download ...

  2. WindowsServer2012 R2 64位中文标准版(IIS8.5)下手动搭建PHP环境详细图文教程(二)安装IIS8.5...

    //来源:http://www.imaoye.com/Technology/WindowsServer2012R264IIS85.html 阿里云服务器ECS Windows Server 2012 ...

  3. Linux下搭建ESP-IDF 开发环境教程,适合ESP32/S2/C3/S3系列模组二次开发

    1 Ubuntu安装 在Linux下编译速度比Windows快很多,一般推荐优先使用Linux开发.Ubuntu是非常常见的Linux操作系统. 网上已经有非常多的Ubuntu安装教程,这里推荐一篇, ...

  4. Eclipse+Pydev搭建Python开发环境教程

    Eclipse+Pydev搭建Python开发环境教程 Eclipse+Pydev搭建Python开发环境 PyDev简介 准备文件 Jdk配置,1.8版本 python-2.7.18安装 Eclip ...

  5. Mac下搭建php开发环境教程

    这篇文章主要介绍了Mac下搭建php开发环境教程,Mac OS X内置了Apache 和 PHP,这样使用起来非常方便.本文以Mac OS X 10.6.3为例,需要的朋友可以参考下 Mac OS X ...

  6. 服务器php环境搭建教程,PHP服务端环境搭建的图文教程(分享)

    一.PHP服务端环境搭建 1.php服务端环境安装套件xampp(apach+mysql+php解释器) F:\MyDoc文件(重要)\DL_学习\download重要资源\apache服务器组件 安 ...

  7. linux 搭建开发stm32 stlink,ROS2与STM32入门教程-搭建开发环境(ubuntu+eclipse+cubemx+stlink+openocd)...

    ROS2与C++入门教程-搭建开发环境(ubuntu+eclipse+cubemx+stlink+opencd) 说明: 介绍如何在ubuntu下搭建开发环境 环境:ubuntu20.04 + ecl ...

  8. 手把手教你搭建开发环境之Java开发

    大家好呀,从今天开始,我们的手把手系列教程就正式开始啦. 如果你觉得本文对你有一些帮助,欢迎大家关注.点赞.分享给需要的小伙伴们,谢谢大家啦. 前言 Java虽然是一个比较老的语言,但到现在依然充满了 ...

  9. Esp8266学习之旅① 搭建开发环境,开始一个“hellow world”串口打印。

    本系列博客学习由非官方人员 半颗心脏 潜心所力所写,不做开发板.仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 基于C SDK的ESP8266开发技术全系列笔记 一.N ...

最新文章

  1. JDK9新特性实战:简化流关闭新姿势。
  2. 神经网络收敛标准与准确率之间的数学关系
  3. 【控制】《多智能体系统的动力学分析与设计》徐光辉老师-第1章-绪论
  4. SQL中declare申明变量
  5. 计算机应用基础2010备课,《计算机应用基础》教案——office2010版-(2)
  6. python去掉txt文件行尾换行
  7. ITK:获取PointSet的边界框
  8. menu什么意思中文意思_pipeline什么意思
  9. 在server 2008R2组策略所有域计算机防火墙都处于更关闭状态
  10. 【回归预测】基于matlab麻雀算法SSA优化混合核极限学习机KELM回归预测【含Matlab源码 1646期】
  11. 静态测试和动态测试有何区别
  12. ESP32 INMP441麦克风驱动
  13. Flink流处理框架总结
  14. 知识图谱研究最新综述论文: 表示学习、知识获取与应用
  15. 计算机每天定时开机设置方法,定时开机 (电脑自动开机) 设置方法
  16. webpack 拾翠:充分利用 CommonsChunkPlugin()
  17. Android 系统 Bar 沉浸式完美兼容方案
  18. IntelliJ IDEA Ultimate破解安装及使用其进行Spring程序开发
  19. php http请求 返回数据包太大 499,http错误码原理及复现 - 499,500,502,504
  20. C++编程-leetcode-19-删除链表的倒数第N个结点

热门文章

  1. 自动化测试和测试开发的区别?培训学哪个更好?
  2. UI设计为什么要使用Figma?
  3. 一文带你领略JS中原型链的精妙设计
  4. python中numpy、matplotlib的引入及测试
  5. html定位ajax php,AJAX HTML PHP问题
  6. micropython 人脸识别检测_Flask实战!从后台管理到人脸识别,六款优质Flask开源项目介绍...
  7. python 输出文件中返回码为200的接口的平均响应时间_Django查看响应时间问题
  8. delphi与java_Delphi XE8中Delphi和JAVA数据类型对应关系!
  9. Filter过滤器拦截路径配置
  10. pytorch手动安装开发包