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[/code] 
使用
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.csdn.net/qqduxingzhe/article/details/72629278

https://www.jianshu.com/p/b9757a5bcb07

https://www.jianshu.com/p/1baf40713c1c