码迷,mamicode.com
首页 > 其他好文 > 详细

2.ionic系列之ionic开发环境搭建(一)

时间:2016-05-13 01:20:08      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:

工欲善其事,必先利其器。本文将介绍在windows平台及mac ox平台搭建ionic开发环境的过程。

         1.安装Node.js

            打开Node.js官网:https://nodejs.org/官网有两个版本的node.js一个是LTS(长期支持版本),一个是Current当前版本,建议使用LTS版本下载使用。安装时,windows平台安装时一直下一步下一步就OK,mac ox平台直接安装就行。安装完成后windows打开命令行,而mac ox打开终端,输入:

node –v

后回车,若出现node版本号则安装成功。

技术分享

图1 node.js官网


技术分享

图2 node.js安装成功,输入node –v


2.安装cordova

            windows和mac ox分别打开命令行和终端使用以下命令安装cordova

npm install –g cordova

输入

cordova –v

提示cordova版本号则表示安装成功

技术分享
图3 安装成功

3.安装ionic

使用命令安装:

npm install -g ionic

输入

ionic –v

若弹出ionic版本则表示安装成功

技术分享
图4 安装成功

4.创建ionic项目并在谷歌浏览器上调试

使用命令行或终端进入要创建ionic项目的目录输入

ionic start myproject

后输入

cd myproject

可进入创建的项目

输入

ionic serve

将提示输入调试地址提示,输入localhost即可(windows环境下会弹出窗口报错,不用管他,直接在谷歌浏览器中输入http://localhost:8100/#/tab/dash即可,剩下操作和max ox一样),mac ox下将直接自动打开谷歌浏览器,按住command+alt+i键(windows是F12)进入调试模式点击下图中的按钮可预览ionic项目在手机上运行的样子,至此一个完整的ionic官方demo就搭建好了。

技术分享

图5 谷歌浏览器模拟手机


技术分享

图6 demo运行后的样子

2.ionic系列之ionic开发环境搭建(一)

标签:

原文地址:http://blog.csdn.net/book_and_code/article/details/51346000

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