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 特点

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

查看【node】版本：node -v
查看【npm】版本：npm -v

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

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

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

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

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

查看所有可用的启动器模板： ionic start --list
创建ng的【tabs】应用(名称ionicDemo01)：ionic start ionicDemo01 tabs --type=angular
选择进入刚才的应用：cd ionicDemo01
安装项目依赖：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】创建的项目运行如下：

Ionic for Angular 环境搭建相关推荐

【Angular】angular环境搭建
angular环境搭建 1.安装前的准备 1.1 安装node.js 1.2 安装cnpm 1.3 使用npm/cnpm安装angular/ cli 2.创建angular项目 2.1找到要创建项目的 ...
Ionic+Cordova开发环境搭建
Ionic+Cordova的组合是一个跨平台的移动开发框架,属于HybirdApp开发模式.其中Ionic是一个前端框架,集成了AngularJs在里面,有很好很漂亮的UI控件.Cordova本身就是 ...
Windows下Ionic Android开发环境搭建
转自 http://www.itwap.net/ArticleContent.aspx?id=26 来源: itwap.net 作者: 词略时间: 2015-4-2 16:57:28 (一)Ioni ...
Cordova/Ionic Android 开发环境搭建 - Windows系统
电脑操作系统 - windows 10 IDE - WebStorm 2019 Node v10.15.3 npm v6.4.1 Ionic v3 Angula v5 Cordova 移动设备 - 机 ...
angular环境搭建
1.安装typescript npm install -g typescript 2.安装angular-cli npm install -g @angular/cli
前端学习（2321）：angular环境搭建1
Angular4.0环境搭建详解--windows系统环境
第一步:安装NodeJS 下载最新版的NodeJS并安装,安装完成后打开CMD命令行,输入以下命令: node -v 若返回类似版本号则代表NodeJS安装成功,如下: 第二部安装npm 新版的No ...
Ionic+Angular 开发移动应用一：环境搭建
欢迎交换友链: Laker's Blog--进击的程序媛 Github:https://github.com/younglaker V信: lakerHQ (请注明'来自博客') 介绍 ionic 是 ...
Ionic 学习笔记之-痛彻心扉的环境搭建
Ionic 学习笔记之-痛彻心扉的环境搭建最近在学习Ionic 做多平台的应用.跨平台应用.就是用html写的界面.js实现逻辑. 在学ionic之前选了各种跨平台APP开发框架.最后选择了ioni ...
最新版ionic环境搭建
由于最近开始学习Ionic,发现网上的环境搭建都是好几年前的,按照上面的方法搭建都不成功,折腾了好几天才把环境搭建成功,可以编译APK包,下面把搭建的过程以及工具包都分享出来.注:

Ionic for Angular 环境搭建

Ionic 简介：

Ionic 特点

环境搭建（Windows平台）：

Ionic for Angular 环境搭建相关推荐

最新文章

热门文章