码迷,mamicode.com
首页 > 移动开发 > 详细

01.正式进入状态的ionic第一天 使用cmd创建一个app项目

时间:2016-07-31 17:28:09      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:

个人总结:

 

在安装nodejs 和 cordova的前提下  

使用CMD打开自己创建的目录后

 

ionic start myApp tabs   //创建带有top栏和bottom栏的示例项目

ionic start myApp sidemenu  //创建带有左侧带有menu栏的示例项目

ionic start myApp blank   //创建空白项目

 

必须用cmd到应用的目录下才能正确添加安卓等:

 

ionic platform add android  

 

 

--------------------------------------------------完结

附带详细教程:

 

 

1.准备工作
    下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm 运行环境),Android SDK (Android编译)
    不一定有时间回复各位的问题,最好加QQ群讨论:245285768
 
2.配置环境变量:
[plain] view plain copy
 
 print?技术分享技术分享
  1. ANDROID_HOME    D:\Program Files\adt\sdk                              (对应sdk路径)  
  2.        path     %ANDROID_HOME%\platform-tools;  
  3.        path     %ANDROID_HOME%\tools;  

3.安装ionic等,运行命令提示符(管理员) 输入

    a. 将cordova和ionic包安装到全局环境中(可供命令行使用):

 

[plain] view plain copy
 
 print?技术分享技术分享
  1. npm install -g cordova ionic  

   

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

 

[plain] view plain copy
 
 print?技术分享技术分享
  1. npm install -g cnpm --registry=https://registry.npm.taobao.org  

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

 

[plain] view plain copy
 
 print?技术分享技术分享
  1. cnpm install -g ionic cordova  

 

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

 

[plain] view plain copy
 
 print?技术分享技术分享
  1. cd E:\Study\Android\ionic\Project  
  2. e:  

    c. 创建一个名为myApp的还有tabs的项目(ionic start <project-name> <optional-template>) 可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白):
[plain] view plain copy
 
 print?技术分享技术分享
  1. ionic start myApp tabs  
    d. myApp就为项目名称,进入myApp这个文件夹:
[plain] view plain copy
 
 print?技术分享技术分享
  1. cd myApp  
    e. 添加android平台:
[plain] view plain copy
 
 print?技术分享技术分享
  1. ionic platform add android  
    f. 生成androidapk:
[plain] view plain copy
 
 print?技术分享技术分享
  1. ionic build android  
    g. 在android模拟器或真机中模拟:
[plain] view plain copy
 
 print?技术分享技术分享
  1. ionic emulate android  

   其中f和g可以合并为:

[plain] view plain copy
 
 print?技术分享技术分享
  1. ionic run android  

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

 

4.更新ionic等

    a.更新cordova及ionic包

 

[plain] view plain copy
 
 print?技术分享技术分享
  1. npm update -g cordova ionic  
    b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:

 

 

[plain] view plain copy
 
 print?技术分享技术分享
  1. ionic lib update  

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

 

[plain] view plain copy
 
 print?技术分享技术分享
  1. ionic serve --lab  

 

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

 

[plain] view plain copy
 
 print?技术分享技术分享
  1. ionic -v  

 

01.正式进入状态的ionic第一天 使用cmd创建一个app项目

标签:

原文地址:http://www.cnblogs.com/yaxiangapp/p/5723326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!