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：統一代碼的工具