Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ionic 2 开发大全 #20

Open
semlinker opened this issue Mar 14, 2017 · 0 comments
Open

Ionic 2 开发大全 #20

semlinker opened this issue Mar 14, 2017 · 0 comments

Comments

@semlinker
Copy link
Owner

搭建开发环境

环境安装

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

1.Visual Studio Code

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.模拟器/真机调试

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

抓包工具

其他工具

  • Shadowsocks

官方资源

英文资源

中文资源

Ionic 2 - 博客(英文)

Angular 2 - 博客(英文)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant