臨時項目需要使用AngularJS+Ionic+Cordova技術,半年前跟別人用過一段時間做過幾個頁面,目前別人已經無法聯系了,只能我自己上了。
上次做完項目后,想抽時間好好鞏固一下這方面的知識面來,后來其他項目忙起來就給扔下,主要原因還是懶啊,其實有好多的技術排着隊等着好好研究呢,就是懶啊。
開發第一步,需要先把開發環境搭建起來。
1.開發IDE
選擇VS Code,官方下載地址:https://code.visualstudio.com/ 。下載完成后,根據安裝步驟一步步完成即可。
2.安裝NodeJS
官網下載最新穩定版本,下載地址:https://nodejs.org/en/ 。下載完成后,根據安裝步驟一步步完成即可。
安裝完成后,打開系統cmd,輸入node –v,若能夠獲取到對應的版本號,則完成安裝。
3.安裝Ionic
在VS Code中,打開終端控制器(快捷鍵:Ctrl+~),輸入命令:npm install –g ionic。提示安裝完成后,輸入命令:ionic –version 可查看對應的版本。
4.安裝Cordova
VS Code的終端控制器中,輸入命令:npm install –g cordova。提示安裝完成后,輸入
命令:cordova –version 可查詢對應的版本。
5.創建項目
通過打開文件夾操作,設定工程目錄,VS Code的終端控制器中,輸入命令:ionic start 。提示你輸入工程名稱,鍵入工程名稱后,會讓你選擇項目模板,分別有tabs、blank、sidemenu、super、conference、tutorial、aws。通過鍵盤上下鍵選擇需要的模板,按下Enter即可,創建過程中會提示“Would you like to integrate your new app with Cordova to target native iOS and Android?”(意思是是否將Cordova程序整合到原生的IOS或Android中),一般情況選擇“N”即可。接下來就需要等待項目創建完成即可。
6.瀏覽器運行項目
項目創建完成后,在VS Code的終端控制器中,通過cd命令進入到項目目錄,然后執行ionic serve,接下來執行項目編譯過程,並自動打開瀏覽器,進入到http://localhost:8100/的頁面。創建的Tabs項目的實際運行效果圖如下:
