Ionic--环境配置搭建

2019独角兽企业重金招聘Python工程师标准>>>

Ionic环境配置搭建

1.准备工作

a.下载 Node.js（下载包https://nodejs.org/en/）

   查看node.js是否安装

          Node  -v

B.安装python（https://www.python.org/downloads/）

c.WebStorm（IDE，编写代码，浏览器调试）

d.JDK（webstorm 运行环境）

e.Android SDK (Android编译)

 

2.配置环境变量：

      计算机→属性→高级系统设置→高级→环境变量

  A.JDK环境变量

    a.系统变量→新建 JAVA_HOME 变量 。

       变量值填写jdk的安装目录（例 E:\Java\jdk1.7.0)

    b.系统变量→寻找 Path 变量→编辑

       在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

      （注意原来Path的变量值末尾有没有;号，如果没有，先输入；号再输入上面的代码）

    c.系统变量→新建 CLASSPATH 变量

       变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（注意最前面有一点）

    d.检验是否配置成功 运行cmd 输入 java -version （java 和 -version 之间有空格）

      若显示版本信息 则说明安装和配置成功。

  B.SDK环境变量

    a.系统变量→新建 ANDROID_HOME 变量 。

       变量值填写sdk的安装目录（例 E:\sdk)

    b.系统变量→寻找 Path 变量→编辑

       在变量值最后输入 %ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

      （注意原来Path的变量值末尾有没有;号，如果没有，先输入;号再输入上面的代码）

3.安装ionic等，运行命令提示符（管理员） 输入

   将cordova和ionic包安装到全局环境中（可供命令行使用）：

    npm install -g cordova ionic  

  *注：由于GFW，很多插件下载不下来，我们可以使用淘宝镜像来解决这个问题：

   npm install -g cnpm --registry=https://registry.npm.taobao.org  

  安装完成后，以后所有的插件都使用cnpm这个命令来进行安装。

   cnpm install -g ionic cordova

 *注：安装速度取决于你的网速，未出现ERR的错误提示说明安装成功。

4.查看cordova和ionic是否安装成功

      cordova -v  

       ionic -v

  出现版本号说明安装成功。

5.创建项目

   a.进入你要创建项目的路径：

       1.D:

       2.cd D:\project  

    b.创建一个名为myApp的还有tabs的项目(ionic start <project-name>  <optional-template>) 可选模板为sidemenu侧滑、tabs底部tab切换、blank空白。

       ionic start myApp tabs  

c.myApp就为项目名称,进入myApp这个文件夹:

        cd myApp  

d.添加android平台:

        ionic platform add android  

e.生成androidapk:

        ionic build android  

   *注: 如果提示build successful 则表示安装成功。通常会出现以下情况：

       1.比如它会提醒需要platform for android-22sdk,这时候就需要在网上搜索android-22sdk然后解压放在你的sdk目录里面在sdk\plantforms\ 然后把android-22解压后放到里面。

        2.可能出现的问题是build-tools版本问题，我这个给的信息提示是必须要19.1.0及以上的版本，我就装了一个的21.0.0版本的，结果报了一堆看不懂的错误，最后还是找了一个19.1.0版本的build-tools才成功安装，在build-tools版本网上搜索然后解压到你的sdk\build-tools文件夹里就可以构建完成了。

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

        ionic emulate android  

其中f和g可以合并为：

        ionic run android  

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

此时搭建就已经完成了，在eclipse或者Android studio中导入文件就可以使用了。

6.更新ionic等

    a.更新cordova及ionic包

         npm update -g cordova ionic  

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

        ionic lib update  

7.展现ionic项目结果（显示在ios和android上的样式）

       ionic serve --lab  

转载于:https://my.oschina.net/lwenhao/blog/1612215