1. 程式人生 > >Vue + quasar-framework進行Vue混合app開發 ─ 模擬器選擇及使用(四)

Vue + quasar-framework進行Vue混合app開發 ─ 模擬器選擇及使用(四)

這裡推薦2鍾比較常用的模擬器,Genymotion和Android Studio自帶的Android Virtual Device,至於喜歡用哪個就用哪個。

Genymotion

需要準備下載的軟體 VirtualBox點選下載 Genymotion點選下載(下載需要登入,所以先註冊個賬號,後面使用的時候也需要登入) 安裝過程省略,自己搞定

VirtualBox

Vue + quasar-framework進行Vue混合app開發

Genymotion

在這裡插入圖片描述

點選Add新增安卓裝置,選擇裝置,我這裡選了個版本4.4的裝置,可根據需要選擇,點選Next下一步 Vue + quasar-framework進行Vue混合app開發 可以起個名字,一般預設就行,點選Next Vue + quasar-framework進行Vue混合app開發 開始下載檔案,待續等待下載完成

如果出現下載失敗的情況或者其他失敗的請款,請備好梯子後重試

Vue + quasar-framework進行Vue混合app開發 下載完成,點選Finish Vue + quasar-framework進行Vue混合app開發 列表裡就會出現之前新增的裝置了,點選上方的Start按鈕啟動裝置 Vue + quasar-framework進行Vue混合app開發 啟動模擬器完成 Vue + quasar-framework進行Vue混合app開發 此時VirtualBox中會出現一個執行的裝置 在這裡插入圖片描述 接下來開始啟動專案 執行quasar dev -m cordova -T android 這裡會出現幾個IP,192.168.1.120是我本機電腦的IP,上面2個應該是模擬器的IP,我選1和2都試了下都可以,隨便選了個1回車,等待程式跑完 Vue + quasar-framework進行Vue混合app開發 開啟剛才的模擬器,正常情況如下,如果未彈出次介面,點選紅色框出的按鈕,找到Quasar App圖示手動開啟 Vue + quasar-framework進行Vue混合app開發 Vue + quasar-framework進行Vue混合app開發 在這裡插入圖片描述 此時我們可以點選右上角的電池圖示來調整電池資訊,可以發現App中電池狀態都是響應的 Vue + quasar-framework進行Vue混合app開發

模擬器裡面也是可以使用除錯工具進行除錯,方法同上

Vue + quasar-framework進行Vue混合app開發

Android Virtual Device

開啟你們的Android Studio,找到這個圖示 Vue + quasar-framework進行Vue混合app開發 如果沒有該圖示,點選View-Toolbar,讓ToolBar處於打勾狀態。 在這裡插入圖片描述 開啟後長這樣,預設裡面是空的,這裡我之前已經新增過一個裝置了,如果沒有的話,點選左下角的Create Virtual Device Vue + quasar-framework進行Vue混合app開發 選擇需要裝置,點選Next Vue + quasar-framework進行Vue混合app開發 選擇需要的安卓的版本,點選Download下載 Vue + quasar-framework進行Vue混合app開發 等待下載完成,無法下載或者下載失敗的,自備梯子後重試 Vue + quasar-framework進行Vue混合app開發 下載完成後選擇該版本的裝置,點選Next下一步 在這裡插入圖片描述 可以自定義一個名字或者使用預設的,然後點選Finsh完成 Vue + quasar-framework進行Vue混合app開發

完成後回到列表,列表裡會出現剛才新增的裝置,點選右邊的三角啟動裝置 Vue + quasar-framework進行Vue混合app開發 OK,啟動完畢,然後就可以照著上面Genymotion的方法一樣啟動專案進行開發或者除錯了。 在這裡插入圖片描述