首页 > 其他 > 详细

ionic2环境搭建与hello word

时间:2017-01-16 12:43:09      阅读:389      评论:0      收藏:0      [点我收藏+]

一、环境搭建

需要安装配置以下组件,具体参考:Cordova环境搭建, 我的版本信息如下:

技术分享

这里要特别注意,node版本,ionic2需要 大于v6 ,而不是0.xx版本,否则会不支持报错。


二、设置淘宝镜像

 被强了你懂得,如果不设置淘宝镜像,本人亲测,一天你都搞不定 hello word.

1,registry淘宝镜像  

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

2.使用淘宝镜像 安装 cordova

cnpm install -g cordova
cnpm install -g ionic

3,注册淘宝 包下载镜像:用于项目创建中下载需要的包

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

查看npm config list

技术分享

三、创建ionic2项目

进入你要创建项目的目录 cd .... 使用 ionic start myApp [blank|tabs|sidemenu][verion] 创建项目

ionic start UDahuo.App sidemenu --v2

大约需要5分钟下载各种需要的包

技术分享

项目目录结构与大小如下:
技术分享

四、启动运行项目

进入项目所在目录,使用ionic serve命令可启动在浏览器中查看项目

技术分享

启动后www目录下会产生以下运行需要的问题件

技术分享

启动界面如下

技术分享

五、构建编译项目

1,添加项目到指定平台:使用命令cordova platform add [ios][android]... 可通过  cordova platform ls .显示已经安装的平台项目以及可安装的平台

技术分享

这里我添加到android平台,执行命令如下 

cordova paltform add android

技术分享

成功如下:

技术分享

检查项目,目录会有一个platforms文件夹

技术分享

其中cordova中build、clean、run等相关命令批处理用户构建项目

缺少api级别版本会出错,执行下面命令便会自动下载安装缺失的api级别

mkdir "%ANDROID_HOME%\licenses"
echo |set /p="8933bad161af4178b1185d1a37fbf41ea5269c55" > "%ANDROID_HOME%\licenses\android-sdk-license"

2,build项目,生产apk

这里可使用cordova中build命令,也可以直接双击"platforms/android/cordova/build..bat"

技术分享

完成后结果如下:

技术分享

检查项目的platforms文件夹中多了一个build目录

技术分享

从输出目录中,拷贝apk发送到手机上测试吧!^_^

技术分享

 

ionic2环境搭建与hello word

原文:http://www.cnblogs.com/ejiyuan/p/6285762.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!