zoukankan      html  css  js  c++  java
  • Ionic开发项目

      hybrid app是移动开发代替原生开发完成app应用项目的一种方案,Ionic是hybrid app开发的一种选择。对ionic有兴趣可以去网上找相应的基础知识来学习了解,因为Ionic是基于AngularJS框架开发的,所以在使用Ionic之前需要对angularjs有一定的了解。在这里说一下建立ionic项目的过程。

    1.环境准备:

    (1)nodejs安装

      菜鸟教程网有nodejs的简单介绍和环境安装。安装完后,打开cmd控制台输入图中指令,显示相应的版本号说明安装好了。

    (新版的NodeJS已经集成了npm,所以npm和nodejs环境一般是一起安装完成)

               

    (2)cnpm安装(npm命令有时下载很慢,这是个很折腾得事,所以可以用cnpm来执行相关命令,npm可用情况下可以不用cnpm),cnpm使用的是淘宝网的镜像http://npm.taobao.org,可以通过以下命令全局安装:

    npm install cnpm -g --registry=https://registry.npm.taobao.org

    执行完后,键入cnpm -v命令,显示以下信息说明安装成功

      

    (3)安装ionic和cordova

    npm install -g cordova ionic

    安装完后,输入下图指令,显示相应版本号说明安装成功:

      

    2.建立项目工程

    Ionic官网提供了三个项目模板blank、tabs和sideMenu ,参阅:http://ionicframework.com/getting-started/ ,我们使用下面指令建立一个空模板:

    1 ionic start myIonic blank

    其中myIonic为我们的项目名称 

    执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹,这个文件夹就是Ionic项目的所在目录了。 
    目录下有以下文件:

     1 hooks           //google之后这个目录应该是在编译cordova时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中
     2 plugins         //cordova插件的目录,插件的安装下一节详述
     3 scss            //scss文件,发布时编译这个目录下的文件输出到www的css目录中
     4 www             //我们的开发目录,页面、样式、脚本和图片都放在这个目录下
     5 --css
     6 --img
     7 --js
     8 --lib
     9 --index.html
    10 bower.json      //bower配置文件
    11 config.xml      //Ionic的配置文件 ⱃ可以配置app的id,名称、描述起始页和一起其他配置
    12 gulpfile.js     //gulp构建工具的执行文件,在这个文件中创建任务实现编译scss,css、js优化等
    13 ionic.project   //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
    14 package.json    //npm配置文件

    至此我们就建立了一个ionic项目,下一章说下怎么编译打包开发完的ionic项目。

  • 相关阅读:
    比原空投问答题库题解(一)
    RXD, tree and sequence IN HDU6065
    python爬虫——对爬到的数据进行清洗的一些姿势(5)
    hdu 5934 Bomb
    HDU 3360 National Treasures
    HDU 1845 Jimmy’s Assignment
    HDU 1528 Card Game Cheater
    HDU 1507 Uncle Tom's Inherited Land*
    HDU 1281 棋盘游戏
    WampServer出现You don’t have permission to access/on this server提示
  • 原文地址:https://www.cnblogs.com/chendc/p/7258002.html
Copyright © 2011-2022 走看看