一.学习一样新的框架的步骤:

1.先找到人家的网站, 一个个点过来看看

2.我们前端的框架,分css与js

3.先学css 再学js

4.要学会复制黏贴代码, 实际演练代码的效果

二.ionic环境安装及ionic2安装链接 (vs2015)

1. Ionic的环境安装建立在node安装好的前提下

2. 安装JDK

http://www.oracle.com/technetwork/java/javase/downloads/index.html

配置环境变量

JAVA_HOME  C:\Program
Files\Java\jdk1.8.0_111

Path 
%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

CLASSPATH  .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

到命令行模式下  输入  java -version 如果

则证明已经安装好了

3. 安装sdk

下载sdk  http://tools.android-studio.org/index.php/sdk

安装好之后,弹出一个界面

上面这个界面如何选择选项进行安装  参考这个页面:http://www.jianshu.com/p/ead6f56ddbbc

总共有6项需要安装, 安装之后  ANDROID_HOME  C:\Program Files\andriod(安装路径)

Path: 
%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

测试有没有安装成功  在命令行模式下:  android 
-h

出现如下界面, 则安装成功

4. 安装ionic  cordova 环境

cnpm install -g ionic cordova

安装成功之后如下测试

5. 下载app模板

1.先确定一个项目文件夹
比如到c:Develop下创建一个app文件夹;

2.在该文件夹下打开命令行窗口  输入 ionic start app1  就可以下载一套ionic app模板

6. 添加平台,到工程目录下(就是给我们下载模板,包一层原生app的皮) ionic platform add android

7. 打包成apk文件 ionic
build android

8. 需要连接上手机, 一般情况下要打开开发者模式,
再安装360手机助手, 点击apk就行了

补充:错误解决

1.如果输入java
-version  出现  client VM 则有可能是java虚拟机的位数装错了

解决方法:只需要重新下载一个64位的jdk

2.如果出现如下所示问题,

问题描述: 这是在操作第六步  添加平台的时候,出现的问题

解决方法: 自己查英文, 这个错误是说, 我们缺少android sdk
platform 24; 只需要再下载一遍; 打开SDK Manager.exe

解决方法: 自己查英文, 这个错误是说, 我们缺少android sdk platform 24; 只需要再下载一遍; 打开SDK
Manager.exe

还得删除自己项目目录下的(并不是android SDK目录下)下载没有完全完成的  platforms文件夹; 然后 就是命令行模式 再重复第六步

3.出现如下问题

解决方法:将系统变量下  Path: 改回来了  值为

C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Git\cmd

环境变量安装总结: 1. nvm--->node版本控制  (需要到github上面找nvm)

2.JDK 1.8版本以上的

3.android sdk 需要安装platform
r24版本以及其他5个选项

4.需要安装ionic
cordova   npm install -g ionic cordova

个人环境配置:

前提1.  nvm解码在C:\Develop\nvm-noinstall

前期2.  Android sdk 安装在C:\Program
Files\andriod

NVM_HOME    
C:\Develop\nvm-noinstall

NVM_SYMLINK   C:\Develop\nodejs

NPM_HOME   
C:\Users\Administrator\node_modules\.bin

JAVA_HOME  
C:\Program Files\Java\jdk1.8.0_111

CLASSPATH  
.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

ANDROID_HOME   C:\Program Files\andriod

个人path值:

%NVM_HOME%;%NVM_SYMLINK%;%NPM_HOME%;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;C:\Program
Files\Git\cmd

系统path值:

C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program
Files\Git\cmd

ionic2:

http://www.tuicool.com/articles/vI3ieyn
https://yanxiaodi.gitbooks.io/ionic2-guide/content/installation/%E5%AE%89%E8%A3%85Node.html
http://taco.visualstudio.com/en-us/docs/tutorial-ionic2/

ionic的安装的更多相关文章

  1. MAC OSX环境下cordova+Ionic的安装配置

    一.简介 1.Ionic是什么 IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaSc ...

  2. 关于Ionic的安装

    Ionic是一个前端的框架,帮助开发者使用HTML5, CSS3和JavaScript做出原生应用. http://ionicframework.com/getting-started/ 这里介绍了如 ...

  3. npm 安装卸载模块 & ionic插件安装与卸载

    npm安装模块 npm install xxx利用 npm 安装xxx模块到当前命令行所在目录 npm install -g xxx利用npm安装全局模块xxx 本地安装时将模块写入package.j ...

  4. Ionic 的安装运行

    1.学习前准备工作 1.必须得安装 nodejs (建议安装最新的稳定版本) 2.必须有 Angular 基础:https://www.loaderman.com/goods-1047.html 2. ...

  5. OSX cordova+Ionic的安装配置

    0.安装前确定你的系统安装了node和xcode 1.cordova (1)安装cordova npm config set registry http://registry.cnpmjs.org s ...

  6. ionic cordova 安装指定版本

    安装ionic 及 cordova npm install -g cordova ionic npm 淘宝镜像(GFW,导致很多插件下载失败) npm install -g cnpm --regist ...

  7. ionic插件安装与卸载

    使用下面的命令查询.安装.卸载插件: $ ionic plugin list //列出所有已安装插件 $ ionic plugin remove 插件名 //先根据上面的list列出插件,然后根据插件 ...

  8. win10 nodejs指定ionic版本安装(npm方式)

    步骤1 node-v6.11.3-x64.msi 下载安装node-v6.11.3-x64.msi, 安装完成后利用cmd通过npm安装 ionic cordova cmd npm install - ...

  9. window下Ionic环境安装

    安装以下文件 1.java.jdk 2apache ant 3.android skd 4.node 目前是这几个.  大该流程就是这样子的. Ionic官方教程: http://learn.ioni ...

随机推荐

  1. CSS继承性和层叠性

    一. 继承性    1. 含义:从自己开始直到所包裹的最小的元素,都可以继承一些特有的属性.    2. 作用范围:  a. color.text-开头的.line-开头的.font-开头的,均可以继 ...

  2. 按钮(Buton)组价的功能和用法

    Button继承了TextView,它主要是在UI界面上生成一个按钮,该按钮可以供用户单机,当用户单击按钮时,按钮会触发一个onClick事件. 按钮使用起来比较容易,可以通过为按钮指定android ...

  3. TCMalloc

    一. 原理 tcmalloc就是一个内存分配器,管理堆内存,主要影响malloc和free,用于降低频繁分配.释放内存造成的性能损耗,并且有效地控制内存碎片.glibc中的内存分配器是ptmalloc ...

  4. Oracle-11g 基于 NBU 的 rman 冷备份及恢复

    html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅 ...

  5. 关于在官网上下载Eclipse遇到的问题!!

    首先Eclipse是什么? Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境. 幸运的是,Eclipse 附带了一 ...

  6. linux脚本错误: line *: [: missing `]'

    错误: line *: [: missing `]' 写脚本时,我碰到这个问题是因为if [ ]; ...else...fi语句 解决方法: if后面的[] (test) 和条件要有空格,如: 对于语 ...

  7. 新手初学Redis之基础知识命令

    笔者最初接触Redis是因为了解了一些nosql方面的知识,觉得nosql是一个很有意思的方面.像其中的mongodb,redis等等.当初也没有深入的去了解Redis,直到自己前段时间在写一个web ...

  8. Android客户端连接服务器端,向服务器端发送请求HttpURLConnection

    在Java中想后台服务器发送请求一般都直接使用了Java的网络编程,或者使用HttpClient向后台服务器端发送HTTP请求.虽然在安卓中,所有Java的API都可以使用,而却使用其并不会出现什么问 ...

  9. JavaScript 中的 this 问题总结 !

    2016-12-28 vvv阿城 JavaScript 转自  https://qiutc.me/post/this-this-this-in-javascript.html#call,_apply, ...

  10. SpringMvc拦截器小测试

    前言 俗话说做项目是让人成长最快的方案,最近小编写项目的时候遇到了一个小问题.小编在项目中所负责的后台系统,但是后台系统是通过系统的页面是通过ifame联动的,那么这时候问题就来了,后台所做的所有操作 ...