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

工欲善其事，必先利其器。本文将介绍在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运行后的样子