最近在预研ionic这个框架,和大家分享下过程。
注:
1.我是借用了https://github.com/driftyco/i...的项目下载到本地去运行的,并没自己写项目。
2.我用的环境是mac系统,目录跟windows下的有些不同,没什么影响。
3.鄙人还是新手,文章有什么错误请多多指教

环境搭建:

  1. 安装node.js,此处省略过程,可自行寻找教程。

  2. 使用命令行工具,安装ionic:$ npm install -g ionic cordova。
    clipboard.png

    此处我参照了官网:http://ionicframework.com/doc...

    clipboard.png

    安装完毕,出现了一堆警告。看了一下,感觉都不是什么重要问题,先不管它。

  3. 进入工作目录,我使用的目录叫ionic。将ionic-conference-app下载到本地:$ git clone https://github.com/driftyco/i...
    clipboard.png

  4. 进入项目目录。用过node.js的同志们都知道,如果看到项目中有package.json这个文件,那就是要执行npm install了。因此我们来安装项目需要的相关依赖:$ npm install。
    clipboard.png

    安装很顺利,都没有报错。真是欣慰!(在这个过程中我一直使用的是科学上网,如果大家安装很慢,或者报错,可以试试使用科学上网法,或者使用淘宝的镜像。这两种方法的使用都请大家自行寻找教程吧。)
    clipboard.png

  5. 到这环境就已经都搭好啦。下一步我们来运行一下~~:$ ionic serve。
    clipboard.png

    等待运行完成,浏览器会跳出一个页面

    clipboard.png

    我们的程序出现了!!激动到内牛满面……

App调试

目前看,ionic可以直接用chrome的开发者工具调试,而且对调试中对手势的模拟也是非常棒,完爆项目之前使用的mui(mui根本不能用chrome调试整个程序,模拟调试得搭一堆环境,一直都没搭明白。最后只能用真机调试,各种慢啊有时候还得科学上网,ios真机调试还用不了……吐槽吐槽吐槽)

ionic的App看起来暂时不需要其他的调试方法,不过如果在开发过程中有需要并且找到了更好的方法,我会回来更新哒。


心然may
30 声望1 粉丝