vue+cordova开发移动APP项目
一、环境(版本及配置)
1、node 12.13.1
执行命令查看版本
node -v
显示版本号则安装成功。
2、cordova 9.0.0
执行命令查看版本
cordova -v
显示版本号则安装成功。
3、vue cli 2.9.6
执行命令查看版本
vue -V
显示版本号则安装成功。
4、Android SDK 安装及配置环境
执行命令查看安装成功
adb
显示如此则表示安装配置完成。
5、gradle 6.0
执行命令查看版本
gradle -v
到此vue+cordova开发环境就配置好了。
二、cordova创建项目
全局安装cordova
npm install -g cordova
执行命令：
cordova create myApp1 org.apache.cordova.myApp myApp2
cd myApp1
其中：
myApp1：cordova目录名
org.apache.cordova.myApp：包名
myApp2：项目名(在config.xml中查看)
生成cordova文件中
config.xml -包含应用相关信息，使用到的插件以及面向的平台
platforms – 包含应用运行平台如 Android 和 iOS 上对应的 Cordova 库
plugins – 包含应用所需插件的 Cordova 库，使得应用能够访问例如照相机和电池状态相关的事项。
www – 包含应用源代码，例如 HTML, JavaScript 和 CSS 文件
hooks – 包含为个性化应用编译系统所需的脚本
使用命令：
构建Android平台或者iOS平台
若未构建平台，platform文件是空的
cordova platform add android
cordova platform add ios
到这里，cordova项目就创建好了。
三、创建vue项目
全局安装vue脚手架
npm install -g vue
npm install -g vue-cli
为了方便，不需要每次编译都拷贝文件，可直接在cordova项目根目录中创建vue项目;也可以创建好之后拷贝到cordova项目的根目录中
使用命令创建vue项目
vue init webpack 项目名称
创建完成。
目录结构：
到这里vue项目就创建完成了。
四、若要使用cordova打包vue项目则需要修改：
修改vue项目config/index.js文件
五、编译vue项目
在vue项目根目录执行命令
npm run build
即可编译vue项目自动到cordova主目录下的www文件夹中。
六、调试打开apk软件
1、在cordova主目录下使用命令
cordova run android
使用该命令联调android软件（需连接真机或者模拟器）。
2、执行命令
cordova build android
使用此命令打包apk包platforms/android/app/build/outputs/apk/debug/app-debug.apk
打包完成啦。