构建我的第一个Ionic项目

一、下载安装Node.js

下载地址：https://nodejs.org/en/，安装后打开cmd输入以下命令查看版本号：

C:\Users\p0090268>node -v
v6.11.0

C:\Users\p0090268>npm -v
3.10.10

二、安装Ionic

输入以下命令安装Ionic：

npm install -g ionic

如果之前安装过其他版本的话，需要先卸载：

npm uninstall -g ionic

安装完成后输入以下命令查看版本号：

C:\Users\p0090268>ionic -version
3.3.0

三、安装Cordova

输入以下命令安装Cordova：

npm install -g cordova

在弹出的提示信息输入y，查看版本号：

C:\Users\p0090268>cordova -version
7.0.1

四、安装JDK

下载地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html

下载安装后，设置系统变量，名称：JAVA_HOME， 值：C:\Program Files\Java\jdk1.8.0_51，在PATH中添加%JAVA_HOME%\bin

安装完成后输入以下命令查看版本：

C:\Users\p0090268>java -version
java version "1.8.0_51"
Java(TM) SE Runtime Environment (build 1.8.0_51-b16)
Java HotSpot(TM) 64-Bit Server VM (build 25.51-b03, mixed mode)

五、安装Android SDK

可以通过Android Studio下载，也可以去Android Developers自行下载，同样需要设置系统变量，名称：ANDROID_HOME， 值：D:\Android\sdk

六、创建项目

在命令行中cd到项目目录（任意路径），使用 start 命令来创建app：

ionic start MyFirstIonicProject tutorial --v3

MyFirstIonicProject 是项目名，tutorial 是通过指定的 tutorial 模板来初始化项目，如果不加默认是tabs模版，如果不想使用模版添加blank参数，--v3是指定新建项目的Ionic版本，如果不加，默认是v1版本，如果你指定创建的版本没有安装或被移除，会创建失败。不出意外的话，running几分钟之后，项目就创建成功了。

七、运行项目

项目创建成功后，在该路径下会看到多了个MyFirstIonicProject文件，这就是我们的项目了。cd到该目录，通过 serve 命令来启动项目：

E:\Ionic\MyFirstIonicProject>cd MyFirstIonicProject
E:\Ionic\MyFirstIonicProject\MyFirstIonicProject>ionic serve

等待命令行编译项目，输出内容：

[INFO] Starting app-scripts server: --port 8100 --p 81
 --r 35729 --address 0.0.0.0 - Ctrl+C to cancel
[15:07:40]  watch started ...
[15:07:40]  build dev started ...
[15:07:40]  clean started ...
[15:07:40]  clean finished in 2 ms
[15:07:40]  copy started ...
[15:07:40]  transpile started ...
[15:07:45]  transpile finished in 4.39 s
[15:07:45]  preprocess started ...
[15:07:45]  deeplinks started ...
[15:07:45]  deeplinks finished in 17 ms
[15:07:45]  preprocess finished in 20 ms
[15:07:45]  webpack started ...
[15:07:45]  copy finished in 4.75 s
[15:07:55]  webpack finished in 10.69 s
[15:07:55]  sass started ...
[15:07:57]  sass finished in 2.21 s
[15:07:57]  postprocess started ...
[15:07:58]  postprocess finished in 42 ms
[15:07:58]  lint started ...
[15:07:58]  build dev finished in 17.45 s
[15:07:58]  watch ready in 17.75 s
[15:07:58]  dev server running: http://localhost:8100/

[15:08:17]  lint finished in 19.48 s

然后浏览器会自动打开这个地址，就能看到效果了。