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框架會自動生成以下文件:

wKiom1ahxt6SrL_QAAEJku1IYlk307.png

可以看到下邊包含了很多文件:

    ionic項目自動生成的文件:

    hooks:自定義的cordova的腳本命令來執行一些特別指令

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

    plugins:項目所用到的插件

    scss:scss代碼,發佈時會輸出到你的www/css/

    www:最主要的文件,是我們所建立的應用,包括css,p_w_picpath,js,lib,templates,index.html

    bower.json:bower配置文件

    config.xml:Ionic的配置文件,可以配置appid,名稱、描述起始頁等

    gulpfile.js:gulp構建工具的執行文件

    ionic.project:Ionic的項目文件

    package.json :npm配置文件

 其餘爲webstrom中自己生成的文件:

    bowerrrc:bower配置文件

    gitignore:git配置文件

    editorconfig:統一代碼的工具

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章