Ionic 开发环境搭建（Windows）-yellowcong

公司有童鞋用Ionic，反正听说这个东西可以直接写出基于手机的web端，以及android和ios的开发版本，所以觉得值得一看，说不定哪天就用上了呢。这个ionic是依赖于nodejs的，开发的时候，需要了解AngularJS和html的，简单来说这个ionic简化了客户端的开发流程。一次开发两个版本的应用。这个有点类似与unity3d生成多个版本的应用。在这个安装过程中，我遇到的最大的坑，就是镜像的设定。需要设定为淘宝的镜像，并使用cnpm安装cordova和ionic

nodejs安装

#node下载地址
http://nodejs.cn/download/

#个人的下载地址
http://yellowcong.qiniudn.com/node-v8.9.3-x64.msi

使用node -v 命令，查看版本信息

设定镜像

设定nodejs的镜像为国内的淘宝镜像

#global 表示全局的设置
npm config set registry https://registry.npm.taobao.org --global 
npm config set disturl https://npm.taobao.org/dist --global

安装cnpm

这个是通过cnpm来替换掉npm，如果直接使用npm安装ionic的时候，有可能会报错，说找不到icon的情况。

npm install -g cnpm

安装 Cordova & Ionic CLI

通过cnpm来安装cordova和ionic

#-g 代表全局安装、install 可以简写为 i、-version 可以简写为 -v
cnpm i cordova ionic -g

查看版本信息

#-v 表示version 版本
cordova -v
ionic -v

入门案例

1、创建项目

#ionic3Demo  项目名称
#tabs 模板名称（默认是tabs，其他还有blank的单页等）
ionic start ionic3Demo tabs

2、安装依赖

会生成一个 node_modules 文件夹，并在里面安装 package.json 上写下的文件

#安装依赖，这个会看package.json 里面的依赖，来安装
cnpm install 

下图可以看到安装了20个文件夹

查看依赖信息，package.json中，有这个服务所依赖的信息。

3、启动服务

#进入到项目目录下，启动服务
ionic serve

后台信息

浏览器访问效果

参考文章

http://blog.youkuaiyun.com/qqduxingzhe/article/details/72629278
https://www.jianshu.com/p/b9757a5bcb07
https://www.jianshu.com/p/1baf40713c1c