ionic学习之创建一个ionic项目

原文连接：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic%E5%AD%A6%E4%B9%A0%E4%B9%8B%E5%BB%BA%E7%AB%8B%E4%B8%80%E4%B8%AAionic%E9%A1%B9%E7%9B%AE/

1.安装ionic：$npm install -g cordova ionic

2.更改命令所在位置到你容易找到的目录：cd  directoryName

   例如：cd practice                                                  

3.终端输入命令新建一个工程：$ ionic start myApp blank(生成名字为myApp的空项目)

                                     或$ ionic start myApptabs(生成名字为myApp的带有选项卡的项目)       

                                     或$ ionic start myApp sidemenu(生成名字为myApp的带有侧边菜单的项目) 

   这里根据本身的项目须要，选择任意一个命令便可快速创建一个ionic framework项目。 

4.为这个项目配置iOS和android平台，在webstrom上的terminal终端中执行：

                  $ionic platform add iOS

                  $ionic platform add android

5.运行项目：若是想在电脑浏览器上看效果，能够执行：ionic serve

                 若是电脑已经安装了iOS或androidmo'ni模拟器能够执行如下命令看手机上的效果：

                 在iOS上创建并测试该项目：

                        $ionic build iOS

                        $ionic emulate iOS便可在电脑上模拟iOS手机运行这个app,

                 这两个命令也能够用ionic run iOS代替，效果同样。

                 在android上创建并测试该项目：

                        $ionic build android

                        $ionic emulate android

                  或者一样用一句ionic run android代替上面两行命令。

     执行以上命令后就能够在浏览器或模拟器上看到app的效果了~

6.ionic框架会自动生成如下文件：

 

能够看到下边包含了不少文件：

    ionic项目自动生成的文件：

    hooks:自定义的cordova的脚本命令来执行一些特别指令

    platfroms:包含添加的ios和android平台

    plugins：项目所用到的插件

    scss：scss代码，发布时会输出到你的www/css/

    www：最主要的文件，是咱们所创建的应用，包括css，image，js，lib,templates,index.html

    bower.json：bower配置文件

    config.xml：Ionic的配置文件，能够配置app的id，名称、描述起始页等

    gulpfile.js：gulp构建工具的执行文件

    ionic.project：Ionic的项目文件

    package.json ：npm配置文件

 其他为webstrom中本身生成的文件：

    bowerrrc：bower配置文件

    gitignore：git配置文件

    editorconfig：统一代码的工具