MogonBook_Ionic_环境搭建-原创手记-慕课网

一、初识Ionic

1.简介

Ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。同时还是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

    ionic的开发添加android和ios环境。
    ionic提供很多css组件和javascript UI库。
    ionic可以支持定制android和ios的插件，也支持服务端REST的敏捷开发。

2.特点

    ionic 基于Angular语法，简单易学。
    ionic 是一个轻量级框架。
    ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVVM ，代码易维护。
    ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
    ionic 专注原生，让你看不出混合应用和原生的区别
    ionic 提供了强大的命令行工具。
    ionic 性能优越，运行速度快。

二、环境搭建

1.安装Node.js

Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。

    V8引擎执行Javascript的速度非常快，性能非常好。
    Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。
    Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

【安装】

①登录 https://nodejs.org/en/ 根据需要，下载稳定版Node.js（Node.js最好安装最新版本）

*②运行下载的安装包 node-v..-x64（86）.msi 进行安装**

【运行】

打开Node.js command prompt命令行

图片描述

查看node.js和npm的版本号，如出现以下内容，则安装成功

Your environment has been set up for using Node.js 8.9.3 (x64) and npm.

C:\Users\EAST>node -v
v8.9.3

C:\Users\EAST>npm -v
5.5.1

【Node Package Manager】

NPM的全称是Node Package Manager，是一个Node.js包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

Node.js自身提供了基本的模块，但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是，Node.js库和框架为我们提供了帮助，让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦，有了NPM，可以很快的找到特定服务要使用的包，进行下载、安装以及管理已经安装的包。

NPM有些类似于Java中Maven构建依赖下载Jar包的功能，可以通过 https://www.npmjs.com/ 来检索所需要依赖的坐标。由于NPM服务器不在国内，在下载npm包的时候经常会遇到超时情况。所以国内可以使用淘宝的npm 镜像，输入以下命令，安装淘宝镜像源：

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

【TAONPM】

淘宝 NPM 镜像

这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。

当前 registry.npm.taobao.org 是从 r.cnpmjs.org 进行全量同步的
当前 npm.taobao.org 运行版本是: cnpmjs.org@3.0.0-alpha.14
本系统运行在 Node.js@v8.9.0 上
开源镜像: http://npm.taobao.org/mirrors
Node.js 镜像: http://npm.taobao.org/mirrors/node
alinode 镜像: http://npm.taobao.org/mirrors/alinode
phantomjs 镜像: http://npm.taobao.org/mirrors/phantomjs
ChromeDriver 镜像: http://npm.taobao.org/mirrors/chromedriver
OperaDriver 镜像: http://npm.taobao.org/mirrors/operadriver
Selenium 镜像: http://npm.taobao.org/mirrors/selenium
Node.js 文档镜像:http://npm.taobao.org/mirrors/node/latest/docs/api/index.html
NPM 镜像: https://npm.taobao.org/mirrors/npm/
electron 镜像: https://npm.taobao.org/mirrors/electron/
node-inspector 镜像: https://npm.taobao.org/mirrors/node-inspector/

2.安装Ionic

【安装】

运行如下命令（中央仓库安装）：

npm install -g ionic

运行如下命令（淘宝镜像安装）：

cnpm install -g ionic

安装完成后，输入如下命令，查看版本号（默认下载最新版）：

C:\Users\MahoneAlex>ionic -version 3.19.0

【卸载】

运行如下命令进行卸载：

npm uninstall -g ionic

3.安装Cordova

【Cordova】

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。
Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows
Phone, Palm WebOS, Bada 和 Symbian。

官方主页：http://cordova.apache.org/

【安装】

运行如下命令进行安装（中央仓库安装）：

npm install -g cordova

运行如下命令进行安装（淘宝镜像安装）：

cnpm install -g cordova

查看版本号：

C:\Users\MahoneAlex>cordova -version 6.3.1

4.安装JDK

【安装】

【配置环境变量】

在系统变量中加入键JAVA_HOME，值JDK安装路径
Path中加入%JAVA_HOME%\bin
添加之后打开CMD运行java -version查看当前JDK版本信息如下：

C:\Users\MahoneAlex>java -version
java version "1.8.0_131"
Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)

C:\Users\MahoneAlex>javac -version
javac 1.8.0_131

5.安装SDK

【AndroidADT插件下载】

登录 http://tools.android-studio.org/index.php/adt-bundle-plugin （国内百度云盘镜像）并下载相应位数的ADT插件并解压

图片描述

【配置SDK】

打开ADT，点击Android SDK Manager

图片描述

然后进入如下界面：

图片描述

然后点击Tools下的Options...选项

图片描述

从之前网址上的镜像地址，配置到这里来：

图片描述

这样我们下载SDK的时候，速度就会提升很多！

然后我们需要下载需要的SDK，并安装，如下图所示：

图片描述

安装完成之后，如果我们需要使用本身ADT自带的虚拟机（AVD），则点击如下按钮，如果安装第三方虚拟机，则直接跳过此步：

图片描述

打开之后，点击create按钮来新建一个AVD：

图片描述

并填写如下配置信息：

图片描述

点击OK完成创建，然后点击Start按钮，来启动刚刚所配置好的AVD

MogonBook_Ionic_环境搭建原创