【No.1 Ionic】基础环境配置

Node 安装

git clone https://github.com/nodejs/node
cd node
./configure
make
sudo make install
node -v
npm -v

npm设置淘宝镜像

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

IOS Simulator

sudo npm install -g ios-sim
sudo npm install -g ios-deploy
##如果失败用下面的命令
sudo npm install -g ios-deploy --unsafe-perm=true

Ionic 基本环境

npm install -g cordova ionic

Quick Start

ionic start myApp tabs  #初始化一个有tab的项目
cd myApp  
ionic platform add ios  # 添加ios 平台
ionic build ios  # build ios
ionic emulate ios  # 使用模拟器运行ios
ionic emulate ios --target iPhone-5s # 指定模拟器型号运行
ionic run ios # 使用真机运行IOS

目录结构

• hooks       //google之后这个目录应该是在编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中

• plugins    //cordova插件的目录，插件的安装下一节详述

• scss        //scss文件，发布时编译这个目录下的文件输出到www的css目录中

• www       //我们的开发目录，页面、样式、脚本和图片都放在这个目录下

• --css

• --img

• --js

• --lib

• --index.html

• bower.json      //bower配置文件

• config.xml      //Ionic的配置文件 ⱃ可以配置app的id，名称、描述起始页和一起其他配置

• gulpfile.js     //gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等

• ionic.project   //Ionic的项目文件可以配置Ionic命令中livereload的监控文件

• package.json    //npm配置文件

高级命令

查看目前项目支持的平台 和 ionic支持的平台

ionic platform list

添加项目支持平台

ionic platform add ios/android

build项目

ionic build ios/android
ionic build android -release  #发布正式版等待签名

模拟器运行项目

ionic  emulate  ios/android
ionic  emulate  ios/android --target iPhone-5s

真机运行

ionic run ios --device
ionic run android

查看项目目前的镜像

./platforms/ios/cordova/lib/list-emulator-image #ios
./platforms/android/cordova/lib/list-emulator-image #android

问题

问题一

今天我把xcode 升级到了8，然后使用ionic 真机调试 出错啦，错误如下

(lldb)     run

Traceback (most recent call last):
  File "/tmp/63F258A0-629C-48E0-894B-CF5B2803E750/fruitstrap_819e1be07f922f85816eb033fd16e5d9a81a10da.py", line 36, in run_command

    lldb.target.Launch(lldb.SBLaunchInfo(shlex.split(args[1] and args[1] or '')), error)
IndexError: list index out of range

(lldb)     safequit

Application has not been launched

升级ios-deply 到1.8.7以上，当时是1.8.6

参考资料

• ionic框架官网：http://ionicframework.com/docs/cli/install.html

• ionic lab 可视化开发工具: http://lab.ionic.io/

• ios-deploy：https://github.com/phonegap/ios-deploy/issues/240

原文地址：【No.1 Ionic】基础环境配置
标签：ionic   node   npm   cordova   ios   android   hybrid   ios-sim   ios-deploy

智能推荐

• 【No.3 Ionic】超级逗表情 App
• 【No.2 Ionic】Android打包
• 【No.4 Ionic】修改 cordova 插件
• 【No.5 Ionic】修改 应用名，icon，启动界面
• 【ionic】Mac IOS下真机调试