IT星球论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 206|回复: 0

学习Ionic (一) 搭建开发环境,并创建工程

[复制链接]

1997

主题

1

好友

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

优秀会员 助人为乐 辛勤工作 技术精英 多才多艺 优秀班竹 灌水天才 星球管理 宣传大使 灌水之王 财富勋章 版主勋章 动漫勋章 勤奋会员 论坛精英 PS高手 心 8 闪游皮肤 双鱼座 8★8➹ 志愿者 乖

发表于 2015-12-12 15:49:24 |显示全部楼层
轻松学习Ionic (一) 搭建开发环境,并创建工程
1.准备工作
    下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm 运行环境),Android SDK (Android编译)
    不一定有时间回复各位的问题,最好加QQ群讨论:245285768


2.配置环境变量:




  • ANDROID_HOME    D:\Program Files\adt\sdk                              (对应sdk路径)
  •        path     %ANDROID_HOME%\platform-tools;
  •        path     %ANDROID_HOME%\tools;


3.安装ionic等,运行命令提示符(管理员) 输入
    a. 将cordova和ionic包安装到全局环境中(可供命令行使用):





  • npm install -g cordova ionic

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

[plain] view plaincopyprint?


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

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




  • cnpm install -g ionic cordova


    b. 进入你要创建项目的路径:





  • cd E:\Study\Android\ionic\Project
  • e:

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




  • ionic start myApp tabs

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




  • cd myApp

    e. 添加android平台:




  • ionic platform add android

    f. 生成androidapk:




  • ionic build android

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




  • ionic emulate android

   其中f和g可以合并为:





  • ionic run android

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


4.更新ionic
    a.更新cordova及ionic包





  • npm update -g cordova ionic

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





  • ionic lib update



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





  • ionic serve --lab


6.查看ionic版本(当前最新版本为1.2.13)





  • ionic -v

轻松学习Ionic (一) 搭建开发环境,并创建工程
该会员没有填写今日想说内容.
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆