Ionic for Angular 环境搭建

学习【Ionic】框架前，我们先简单了解下 该框架的基本介绍，本介绍来自【菜鸟网】

Ionic 简介：

• ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
• ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
• ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

Ionic 特点

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

学习Ionic框架之前，需要基本以下基本知识：

HTML，CSS/SCSS，JavaScript/TypeScript，Angular

【Ionic】相关内容：

• ionic 官方网站：http://ionicframework.com/
• ionic 官方文档：http://ionicframework.com/docs/
• Github 地址：https://github.com/driftyco/ionic

由于【Ionic】框架从V4.x以后的版本都支持目前主流的前端框架【angular/优先支持】，【React】和【Vue】，所以可以选择自己的喜好构建应用程序。

 

 环境搭建（Windows平台）：

以管理员身份运行【PowerShell】进行如下操作：

• 安装【node】最新LTS版本，网址：https://nodejs.org/en/

1. 查看【node】版本：node -v
2. 查看【npm】版本：npm -v

• 安装【Angular CLI】：npm install -g @angular/cli ，如果npm安装失败可以使用【cnpm】代替安装；

1. 【cnpm】安装：npm install -g cnpm --registry="https://registry.npm.taobao.org"
2. 【cnpm】代替【npm】安装：cnpm install -g cordova ionic

• 安装【ionic】(v3.x 或 v4.x 版本)：npm install -g cordova ionic  或者 cnpm install -g cordova ionic 

1. 如果以前安装了Ionic CLI（v3.x/v4.x 版本），则由于包名的更改，需要卸载它。
2. 卸载【ionic】：npm uninstall -g ionic 或者 cnpm uninstall -g ionic
3. 安装【ionic cli】：npm install -g @ionic/cli 或者 cnpm install -g @ionic/cli
4. 查看【ionic】版本：ionic -v
5. 查看【cordova】版本：cordova -v

• 创建【ionic】应用程序（基于 Angular 框架）

1. 查看所有可用的启动器模板： ionic start --list
2. 创建ng的【tabs】应用(名称ionicDemo01)：ionic start ionicDemo01 tabs --type=angular 
3. 选择进入刚才的应用：cd ionicDemo01
4. 安装项目依赖：npm install 或者 cnpm install

• 运行项目【ionicDemo01】：ionic server 

如果以上过程出现【WARN】提示：

• npm WARN deprecated core-js@2.6.11: core-js@< 3 is no longer maintained and not recommended for usage

说明【core-js@2.6.11】需要更新：npm install --save  -g core-js@^3 或者 cnpm install --save  -g core-js@^3

最后基于【Ionic for Angular】创建的项目运行如下：