mac os下 ionic 2 安装(一),酷炫的hello world 先跑起来!!

看到这篇文章,说明您对ionic应该有所了解了,一个开发Hybird app的框架,集成angular和phonegap。目前最新版为2.0.0-rc.3。现网上大多数中文资料都是基于ionic1.x的,2.x的还比较少(angular2的中文资料本来就不多),正好这些日子有空,就整理整理自己学习ionic2遇到的坑。

准备入坑--------------------------------

1.首先收藏这个网址:http://ionicframework.com/docs/v2/  ionic2官方首页,以后“组件”,“api”,“图标”这三样得经常查阅这里。 “组件”和“api”文档能看到实时效果,很赞的说。

mac os下 ionic 2 安装(一),酷炫的hello world 先跑起来!!_第1张图片

2.下载安装nodejs6+ ,https://nodejs.org/en/  

现在最新版是7.2.0了,不过我现在是5,最好用6+,5有各种未知错误~

mac os下 ionic 2 安装(一),酷炫的hello world 先跑起来!!_第2张图片

3. 安装CLI和cordova,注意加sudo避免各种权限问题,因为是国外服务器,如果发现速度很慢请自行“科学上网”。

命令行:

sudo npm install -g ionic cordova

安装成功后

命令行:

ionic info
看看环境安装情况,ios-deploy 和ios-sim应该还没有,后面打包app需要。

mac os下 ionic 2 安装(一),酷炫的hello world 先跑起来!!_第3张图片

4. 下载基础应用

命令行:

sudo ionic start test --v2

start:下载一个带tabs的基础应用

test:应用名,自己随意取

--v2:表示使用2.x 版本的ionic构建


5.上一步会在命里行运行目录新建一个test目录,进入

命令行:

cd test

运行应用

命令行:

ionic serve

mac os下 ionic 2 安装(一),酷炫的hello world 先跑起来!!_第4张图片

结果如上无报错的话,浏览器自动弹出,可以看到牛逼的带tabs的wap应用啦,我们用chrome的开发工具查看手机视图。

mac os下 ionic 2 安装(一),酷炫的hello world 先跑起来!!_第5张图片

可以浏览器输入http://localhost:8100/ionic-lab 查看ios、android、windows三个平台的实时效果。

mac os下 ionic 2 安装(一),酷炫的hello world 先跑起来!!_第6张图片

这样ionic2 的hello world 就算跑起来啦,不过现在只是浏览器上,要打成ios、android、windows app还需要 ionic platform ,这个稍后介绍。

详情请见 CrossInfo 

你可能感兴趣的:(ionic)