vue + vant + cordova打包app
设置安装项目依赖的指令最好选择在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指令可能会出现问题(linux下没试过)，所以建议直接把npm镜像更换成淘宝镜像，直接使用npm指令进行操作，更换镜像后npm等价于cnpm：
//替换淘宝镜像
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-name3.2、vue-cli2
//脚手架安装指令
npm install -g @vue/cli-init
//创建vue项目指令
vue init webpack my-vue-project-namevue-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/quickstartPS*我的案例里面使用的是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的演示app效果截图(电量不要在意我的电量doge)：
言尽于此，如果有错误欢迎指正。