<style> .markdown-body{ font-family: Menlo,Monaco,Consolas,"Courier New",monospace,"微軟正黑體" ; } </style> # Vue Cli 3 + vue-cli-plugin-cordova ###### tags: `VueJS`,`佩泥的筆記區`,`筆記` > 不要隨意更改內容，고만습니다。:wink: > 只是筆記區，可能有錯誤:cry: ## 請確認已完成環境建置 > 請參考 > [JDK、Android Studio、Gradle下載、安裝和環境變數配置](https://hackmd.io/@dS9O1GnxQ2OLRV78HTm_nA/environment-setting) * 驗證環境 ![](https://i.imgur.com/hgybOyd.jpg) ### 1. 建立一個新的 Vue 專案 ```html= vue create [專案名稱] ``` > 選項(選擇手動Maually select features) ![](https://i.imgur.com/ocm7xBO.jpg) > 手動操作請參考以下(依個人需求設定) > https://ithelp.ithome.com.tw/articles/10216606 ### 2. 安裝 vue-cli-plugin-cordova 套件 :::warning 記得進到專案裡安裝cordova ::: ```html= cd [專案名稱] ``` ```html= vue add cordova ``` > 按Enter預設 ![](https://i.imgur.com/2fjzyMk.jpg) > 也可以自定義 ```html= cordova create [資料夾名稱] [APP的ID名稱] [APP顯示的名稱] ``` > 之後仍可在 config.xml 中修改 ### 3. 建立Platform > 安裝Android平台 > 版本號可參考：https://cordova.apache.org/announcements/2019/03/22/cordova-cli-release-9.0.0.html :::warning 記得進到cordova資料夾底下 ::: ```html= cd [cordova資料夾名稱] cordova platform add android ``` > 預設安裝最新Android版本 ### 4. 安裝與卸載Cordova Plugin > 安裝 ```html= cordova plugin add [plugin名稱] ``` > 卸載 ```html= cordova plugin remove [plugin名稱] ``` > 查看目前已安裝Plugin ```html= cordova plugin list ``` ### 5. 建立完成 ![](https://i.imgur.com/q8qmAHx.jpg) ### 6. 運行專案 :::warning 記得跳出cordova資料夾，在專案資料夾裡下run ::: ```html= npm run cordova-serve-browser ``` ### 7. 使用vue-cli-plugin-cordova build apk > https://www.npmjs.com/package/vue-cli-plugin-cordova