設置安裝項目依賴的指令最好選擇在pwoershell下執行，普通cmd窗口下可能沒有一些權限導致指令執行報錯；
安裝vue，安裝cordova等等安裝指令建議在powershell(管理員)下執行。
PS * 本文涉及大量npm安裝的操作，安裝cordova、vue、vue-cli、vant相關，建議每次執行完安裝操作後都在項目根路徑手動執行一次如下指令，進行依賴安裝，否則容易碰到莫名其秒的問題，出錯可以直接百度，因爲太多人搞前端了，咱碰到的問題大多數別人都碰到了，只是看你能不能找到合適的答案而已。
npm install
目錄：
一、node.js #####################################################
二、npm鏡像更換 #################################################
三、SDK環境搭建 #################################################
四、構建cordova項目 ##############################################
五、cordova構建apk安裝包以及相關問題解決 #############################
六、vue-cli2和vue-cli3 #############################################
七、整合vant介紹，以及vant按鈕效果展示 ################################
####vue
一、.安裝node.js //注意 node.js字帶 npm 但是版本不一定最新
二、.npm更換淘寶鏡像，雖然可以使用npm，但是windows下cnpm指令可能會出現莫名奇妙的問題，所以建議直接把npm鏡像更換成淘寶鏡像直接使用npm指令：
//替換淘寶鏡像
npm config set registry https://registry.npm.taobao.org
//驗證鏡像
npm config get registry
三、雖然vue 是項目核心，是編輯的項目的基礎，但是隻有vue我們的項目是不會自動變成想要的apk文件的；
所以這裏需要引入一個東西：cordova，我麼可以使用cordova把編譯過後的vue-vant項目打包成android的apk安裝包；
因爲需要打包成apk，那麼我們首先需要的是安裝SDK環境，並配置SDK環境變量；
android sdk 下載地址： https://www.androiddevtools.cn
下載sdk 的zip壓縮吧，解壓到固定位置，避免漢字路徑
解壓得到的文件夾中的sdk manager.exe，(下圖是我安裝完sdk後的目錄結構，初始解壓完還需要下載很多東西應該沒這麼多)
運行它安裝如下api和插件以確保sdk環境完整:
1、Tools 選擇前三個，第三個Android SDK Build-tools有非常多的版本，可以選擇最新的；
2、Tools(Preview Channel) (可選);
3、Android API 建議選擇最新穩定版，當前2020-06最新穩定版是Android 10,下邊的全選，這塊安裝的內容很多需要很長時間，大小以G計算
4、exras 這個我就選了usb的，感覺影響不大，(可選)；
經過漫長的等待後，SDK API和插件安裝完成(可能部分文件因爲網絡問題安裝失敗，務必檢查妥善後進行下一步)
配置sdk環境變量：
配置完打開新的cmd窗口(舊的窗口中新配置的環境變量不生效)，執行指令adb 如果打印很多的android相關信息即爲android-sdk安裝成功；
adb
效果如下即可證明sdk環境搭建完畢(不排除SDK API沒裝完全的情況，所以使用SDK Manager.exe安裝API的時候請務必檢查勾選過的都變成了"installed")：
PS*JDK也是必須的，因爲JDK安裝比較簡單就不再贅述了。
準備完JDK、SDK後，安裝cordova ,創建cordova項目：
四、安裝cordova 相關指令
//全局安裝cordova
npm install -g cordova
//驗證cordova是否安裝成功
cordova -v
//創建cordova項目
cordova create your-cordova-project-name
//進入創建的cordova項目(安裝android、ios(根據需要)、browser)
cd create your-cordova-project-name
//1、安裝android 用於打包apk
cordova platform add android --save
//2、安裝瀏覽器平臺 進行快捷測試
cordova platform add browser --save
//3、安裝完成後通過指令顯示所有安裝的平臺
cordova platform -ls
關於cordova測試：
cordova run browser 會在默認端口8000打開一個頁面
如下是我創建的cordova項目大致結構，learn-cordova是我的cordova項目名稱：
生成apk路徑如下：
**************************
五、cordova build android 這一步如果運氣好就一步跨過去了，運氣不好就只能慢慢摸索了，下邊是我碰到的問題以及解決方案：
PS*這一步是最關鍵的，也是麻煩最多的，所以我把這個指令單獨當成一節
1、控制檯報錯：
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
##原因： 未安裝gradle；
##gradle下載地址： https://services.gradle.org/distributions/ 選擇 gradle-*.*-bin.zip
解壓至固定位置，避免中文路徑，配置環境變量如下：
//驗證gradle安裝指令
gradle -v
2、提示如下內容：
Failed to install the following Android SDK packages as some licences have not been accepted.
原因：
a.sdk manager 更新問題
b.項目配置的 build-tools platforms platform-tools 和本地下載的版本存在不一致的情況
從命令行進入android sdk 安裝目錄下的：tools/bin目錄下執行如下指令：
.\sdkmanager.bat "platforms;android-28"
PS*我的報錯信息提示帶有版本號28,所以我的是android-28,根據實際報錯選用指令；
3、控制檯日誌信息如下：
Observed package id 'build-tools;26.0.0-rc2'
in inconsistent location
'D:\env\Android\android-sdk-windows\build-tools\26.0.0-preview'
(Expected 'D:\env\Android\android-sdk-windows\build-tools\26.0.0-rc2')
原因分析，SDK下build-tools下的文件名錯誤，需要把
D:\env\Android\android-sdk-windows\build-tools\26.0.0-preview 改爲 D:\env\Android\android-sdk-windows\build-tools\26.0.0-rc2
總結：location 提示的文件名一定要改成括號裏 Expected 後的文件名
4、我找不到當時的錯誤信息了，大致描述下：
提示下載jar包失敗，gradle版本可能有問題(這個方向我沒深究，可能也是原因之一，我當時看見有connection faild 就沒有管這個gradle
版本不對的報錯)；
###原因： 下載插件不全，由於我有梯子，所以沒特別的配置gradle的下載鏡像源爲阿里的，直接從國外倉庫進行下載。下載的過程中一直提示有幾個插件無法下載cordova build android指令無法進行下去，然後我找了幾篇博客把下載源改成了阿里的，上一個卡住的插件過去了，但是build進行一會又報了下載插件失敗，看日誌是阿里的鏡像沒有那個插件，然後我再次把gradle鏡像切換爲初始的國外倉庫，果然阿里雲沒有的國外倉庫就能下載了；好了至此問題解決，cordova build android指令成功執行，得到了我想要的apk包；
總結就是：
國外倉庫沒有的阿里倉庫可能有，阿里倉庫沒有的國外倉庫有(打個比方，所以需要靈活變更gradle倉庫鏡像)
PS*如果看着報錯某某jar下載失敗、connection failed、gradle ***** 等等提示，可以考慮gradle鏡像問題了。
至此，我用cordova生成了apk安裝包！希望你碰到比我更少的問題
PS*真心建議碰到問題先冷靜下來，不能自亂陣腳。
六、接下來是整合vue：
3.vue/cli腳手架選擇
3.1、vue-cli3
//安裝指令
npm install -g @vue/cli
//創建vue項目
vue create my-vue-project-name
3.2、vue-cli2
//腳手架安裝指令
npm install -g @vue/cli-init
//創建vue項目指令
vue init webpack my-vue-project-name
vue-cli2和vue-cli3生成的vue項目目錄差異巨大，需要做的配置也不一樣，我兩種方式都有嘗試，綜合來說vue-cli2需要做的處理比較vue-cli3稍微少一點，但是vue-cli3是官方支持的最新的，如何取捨看各自選擇吧
首先我們通過vue的cli在learn-cordova項目同一級別的位置創建一個vue項目，進入根目錄learn-cordova然後命令行執行：
vue init webpack my-vue-vant
設置vue打包路徑，使之編譯的輸出路徑爲learn-cordova項目的www/文件下：
找到vue項目下的config/index.js，配置如下，當運行npm run build 即可將vue編譯結果輸出到cordova項目下的www目錄下
（ps*vue項目路徑不固定，可以在cordova項目內部，也可以在cordova項目外部，但是根據vue項目路徑要靈活變動上述的打包輸出路徑。）
運行指令編譯VUE項目：
npm run build
切換目錄到learn-cordova根目錄，編譯apk文件:
cordova build android
找到apk安裝即可看到vue項目的效果
七、vue項目整合有贊vant，目前所有的環境已經就緒，需要整合的內容只於vue項目有關，關於整合vant推薦查看vant官網：
https://youzan.github.io/vant/#/zh-CN/quickstart
PS*我的案例裏面使用的是vue/cli2構建的vue項目，直接在config/index.js文件中配置了vue編譯輸出路徑。有贊vant官網使用的是vue/cli3腳手架構建的vue項目，基於vue/cli3的vue項目沒有congfig目錄，也沒有index.js需要在vue項目根目錄手動添加一個js文件配置打包信息：
vue.config.js
以關鍵詞： "vue-cli3" 或者 "vue/cli3" 配置 "vue.confg.js" 百度，可以得到很多很詳細的介紹。
最後展示一下我的使用vant-button的效果截圖：
最後的最後，再談一句，cordova貌似逐漸過時，當下最新技術是flutter，不過就算不再使用cordova，本文的其他部分還是有可取之處的。
言盡於此，如果有錯誤歡迎指正。