Ionic 3.x 发布了,基于Angular 4.0,支持 Lazy Loading了, 详细信息请查看 - 更新内容。
搭建开发环境
环境安装
1.Windows 平台
npm install -g cordova ionic
# 安装ant
# 系统环境变量中配置android sdk路径
2.iOS 平台
sudo npm install -g cordova ionic
sudo npm install -g ios-sim
ionic platform add ios # 添加ios平台
ionic build ios # 构建ios项目
ionic emulate ios # 模拟器运行
ionic run ios # 连接真机后直接运行
模拟器运行
-
支持模拟器运行
npm install -g ios-sim
-
列出 iOS 设备类型
ios-sim showdevicetypes
-
模拟器运行
ionic emulate ios --target="iPad-Air"
开启 livereload 和 consolelogs: ionic emulate ios -l -c
-
开启日志(Logging)
consolelogs:ionic emulate ios -c
serverlogs:ionic emulate ios -s
命令行
1.初始化项目
-
ionic start myApp [template name] --v2
template name: blank、sidemenu、tabs
-
ionic start myApp -a "My Awesome Ionic App"
-a: appname
-
ionic start myApp -i com.mycompany.appname
-i: app id
2.添加构建的平台
-
ionic platform add [platform name]
platform name: ios、android、windows
ionic platform remove [platform name]
3.插件管理
ionic plugin add [plugin id] # 添加插件
ionic plugin rm [plugin id] # 移除插件
ionic plugin ls # 列出已安装的插件
4.ionic 生成器
ionic g [page|component|directive|pipe|provider|tabs]
5.预览应用程序
-
ionic serve
ionic serve -l 在浏览器中同时预览 iOS、Android、Window 平台
6.获取命令行信息
ionic info
IDE
Visual Studio Code 插件:
Auto Import
Debugger for Chrome
Document This
Material Theme
Beautify
Auto Rename Tag
Git History
HTML Snippets
Path Intellisense
Angular 2 TypeScript Snippets - Johnpapa
Angular 2 TypeScript Emmet
Ionic 2 Commands with Snippets
ESLint
Code Runner
HTML CSS Class Completion
JavaScript(ES 6) code snippets
REST Client
2.WebStorm
开发调试
1.Browser 调试工具
Augury - Rangle.io 开发的 Angular 2 调试工具
2.模拟器/真机调试
GapDebug - Genuitec 开发的调试工具
Chrome 插件
OneTab - 节省高达95%的内存,并减轻标签页混乱现象
Proxy SwitchyOmega - 轻松快捷地管理和切换多个代理设置
QR Code Generator - 二维码生成器
Octotree - Code tree for GitHub
CORS Toggle - Allow/Disable Cross Domain Request.
Augury - Rangle.io 开发的 Angular 2 调试工具
Postman - 功能超级强大 HTTP Client
抓包工具
Fiddler for Windows - Fiddler是一个 HTTP 协议调试代理工具
Fiddler-AddOns - Fiddler 插件
Fiddler CertMaker for iOS and Android - HTTPS 证书生成插件
HTTPS以及Fiddler抓取HTTPS协议 - APP HTTPS 抓包
Charles for Mac Mac下HTTP 协议调试代理工具
其他工具
Shadowsocks
官方资源
英文资源
中文资源
Ionic 2 - 博客(英文)
Angular 2 - 博客(英文)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。