轻松学习Ionic (一) 搭建开发环境,并创建工程(2015-10-26更新)
2016-06-26 14:50
661 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。
1.准备工作
下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm
运行环境),Android SDK (Android编译)
不一定有时间回复各位的问题,最好加QQ群讨论:245285768
2.配置环境变量:
[plain] view
plain copy
print?
ANDROID_HOME D:\Program Files\adt\sdk (对应sdk路径)
path %ANDROID_HOME%\platform-tools;
path %ANDROID_HOME%\tools;
3.安装ionic等,运行命令提示符(管理员)
输入
a. 将cordova和ionic包安装到全局环境中(可供命令行使用):
[plain] view
plain copy
print?
npm install -g cordova ionic
注:由于GFW,很多插件下载不下来,我们可以使用淘宝镜像来解决这个问题:
[plain] view
plain copy
print?
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,以后所有的插件都使用cnpm这个命令来进行安装。
[plain] view
plain copy
print?
cnpm install -g ionic cordova
b. 进入你要创建项目的路径:
[plain] view
plain copy
print?
cd E:\Study\Android\ionic\Project
e:
c. 创建一个名为myApp的还有tabs的项目(ionic
start <project-name> <optional-template>) 可选模板为sidemenu
侧滑、tabs 底部tab切换、blank 空白):
[plain] view
plain copy
print?
ionic start myApp tabs
d. myApp就为项目名称,进入myApp这个文件夹:
[plain] view
plain copy
print?
cd myApp
e. 添加android平台:
[plain] view
plain copy
print?
ionic platform add android
f. 生成androidapk:
[plain] view
plain copy
print?
ionic build android
g. 在android模拟器或真机中模拟:
[plain] view
plain copy
print?
ionic emulate android
其中f和g可以合并为:
[plain] view
plain copy
print?
ionic run android
即生成apk,并在模拟器或真机中模拟。
4.更新ionic等
a.更新cordova及ionic包
[plain] view
plain copy
print?
npm update -g cordova ionic
b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:
[plain] view
plain copy
print?
ionic lib update
5.展现ionic项目结果(显示在iOS和Android上的样式)
[plain] view
plain copy
print?
ionic serve --lab
6.查看ionic版本(当前最新版本为1.2.13)
[plain] view
plain copy
print?
ionic -v
1.准备工作
下载 Node.js(下载包),WebStorm(IDE,编写代码,浏览器调试),JDK(webstorm
运行环境),Android SDK (Android编译)
不一定有时间回复各位的问题,最好加QQ群讨论:245285768
2.配置环境变量:
[plain] view
plain copy
print?
ANDROID_HOME D:\Program Files\adt\sdk (对应sdk路径)
path %ANDROID_HOME%\platform-tools;
path %ANDROID_HOME%\tools;
3.安装ionic等,运行命令提示符(管理员)
输入
a. 将cordova和ionic包安装到全局环境中(可供命令行使用):
[plain] view
plain copy
print?
npm install -g cordova ionic
注:由于GFW,很多插件下载不下来,我们可以使用淘宝镜像来解决这个问题:
[plain] view
plain copy
print?
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后,以后所有的插件都使用cnpm这个命令来进行安装。
[plain] view
plain copy
print?
cnpm install -g ionic cordova
b. 进入你要创建项目的路径:
[plain] view
plain copy
print?
cd E:\Study\Android\ionic\Project
e:
c. 创建一个名为myApp的还有tabs的项目(ionic
start <project-name> <optional-template>) 可选模板为sidemenu
侧滑、tabs 底部tab切换、blank 空白):
[plain] view
plain copy
print?
ionic start myApp tabs
d. myApp就为项目名称,进入myApp这个文件夹:
[plain] view
plain copy
print?
cd myApp
e. 添加android平台:
[plain] view
plain copy
print?
ionic platform add android
f. 生成androidapk:
[plain] view
plain copy
print?
ionic build android
g. 在android模拟器或真机中模拟:
[plain] view
plain copy
print?
ionic emulate android
其中f和g可以合并为:
[plain] view
plain copy
print?
ionic run android
即生成apk,并在模拟器或真机中模拟。
4.更新ionic等
a.更新cordova及ionic包
[plain] view
plain copy
print?
npm update -g cordova ionic
b.更新已建ionic项目中的js类库,命令行中先进入项目所在目录,然后运行:
[plain] view
plain copy
print?
ionic lib update
5.展现ionic项目结果(显示在iOS和Android上的样式)
[plain] view
plain copy
print?
ionic serve --lab
6.查看ionic版本(当前最新版本为1.2.13)
[plain] view
plain copy
print?
ionic -v
相关文章推荐
- maven 学习
- 研究HelixServer的一路风雨
- Multi-University 2015 #7 D(hdu 5372 Segment Game)
- 各种快递查询Api接口(快递鸟)
- 修改github用户名
- 1045-Access denied for user 'root'@'localhost'(using password:YES)解决方法
- cacti部署流程和命令
- object_funs.py
- Java 修饰符
- hdu 3549 Flow Problem(最大流,Edmond Karp)
- jquery基础语法
- module+standard library.py
- 补间动画和逐帧动画结合之蝴蝶飞舞
- lnmp部署命令
- [从头读历史] 第268节 诗经 鄘风
- 数据库概述(二)
- haproxy配置文件
- function.py
- 注解+反射实现ViewInject的功能
- C++知识点记录extern全局变量