ionic的安装

Posted 2020-09-04 changYao

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

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/