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,p_w_picpath,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:統一代碼的工具