ionic3学习之环境搭建
ionic 简介
ionic
是一款基于Angular、Cordova 的强大的HTML5 移动应用开发框架, 可以快速创建一个跨平台的移动应用。可以快速开发移动App、移动端 WEB 页面、微信公众平台应用,混合app web 页面。ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。
ionic 特点
- 1.ionic 基于Angular语法,简单易学(如果是学习过Angular的话)
- 2.ionic 是一个轻量级框架。
- 3.ionic 提供了漂亮的设计,通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。
- 4.ionic 专注原生,让你看不出混合应用和原生的区别
- 5.ionic 提供了强大的命令行工具
ionic 和 Cordova(phonegap) 、Angular 关系
ionic = Cordova + Angular + ionic CSS
ionic 是完全基于谷歌的 Angular 框架,在 Angular 基础上面做了一些封装,让我们可以更快速和容易的开发移动的项目。ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用 JavaScript 调用 Native 功能,ionic 自己也封装了一套漂亮的CSS UI 库。
ionic3 简介
ionic 基于 AngularJS(这里是指的是 angularjs 1) 开发。angularjs 1 是基于 ES5 的标准开发,但是现在推出了 ES6,ES7都已经发布。angularjs 在 2 的版本上是使用 Typescript 开发。ionic2 就跟着 angular2推出的。ionic3 是 Angular4.0 推出之后的跟进版本,变化幅度不大。详细的可以去看下 ionic 的官网以及 angular的官网。
课前知识
- 前端基本知识(HTML5、JavaScript、CSS)
- 了解 Typescript
- 了解 Angular
如果不熟悉可以去看下
安装 ionic
1. 需要安装 nodejs 以及 npm Node官网的地址:https://nodejs.org/en 2.安装 ionic(全局安装) npm install -g cordova ionic 3.查看下版本 ionic -version 4.创建应用 // 在要创建项目的目录下使用命令 // 创建一个带有标签页的应用,应用名字为 myApp(默认创建的就是tabs) // ionic start myApp blank 是创建一个空白的项目 // ionic start myApp sidemenu 是创建一个带有侧边滑动的菜单 ionic start myApp tabs 5.运行项目 cd myApp ionic serve 6.浏览器访问 localhost:8100
图示:
注:
- 关于安装 ionic 可以看下 ionic官网
- 升级 ionic 的方法:
npm install -g ionic@lastest
补充:
更新 ionic cli 之后在新建工程的时候有多个选项
1.使用命令行 super:
ionic start ionicDemo-super super
对应的界面为:
2.使用命令行 conference :
ionic start ionicDemo-conference conference
对应的界面
3.使用命令行 tutorial
ionic start ionicDemo-tutorial tutorial
对应的界面