Cordova+Vue整合到android studio上实现开发Android APP

前言：

      第一次接触android开发app, 历经几天的爬坑，总算成功看到模拟器上显示vue项目的页面，今天记录一下，以方便以后用到而又手忙脚乱的

1、使用npm安装cordova

npm i -g cordova

2、使用cd到我们要建项目的文件夹路径：如：cd cordovawork

3、创建名称为CordovaProject 的cordova项目

cordova create CordovaProject 

如果不想使用默认的目录和命名空间可使用下面的代码格式

cordova create CordovaProject io.cordova.hellocordova CordovaApp

• CordovaProject 是创建应用的目录名称。
• io.cordova.hellocordova 是默认的反向域值。 如果可能，您应该使用您自己的域值。
• CordovaApp 是您应用的标题。

4、移动到刚创建的项目目录下

cd CordovaProject 

 

5、添加android

cordova platform add android 

 6、检查是否具有cordova项目运行环境

cordova requirements

返回下图说明可以构建APP了 

 

7、把项目打包成android

cordova build android

 8、生成apk进行调试

cordova install android //将编译好的应用程序安装到模拟器上。
cordova emulate android //在模拟器上运行（前提是创建好AVD）
cordova serve android //在浏览器运行
cordova build android //打包cordova项目到android平台。
cordova run android //通过USB直接安装到真机（该语句已经包括了build命令）

我这里选择选择运行cordova run android 命令（已创建好模拟器），出现下图说明成功

9、配置vue项目，将vue项目配置到cordova中（这里可能会需要点时间，耐心等待就好）

 1、为了方便，不需要每次编译都拷贝文件，可直接在存放cordova项目根目录中创建vue项目。比如我的存放在：C:\cordovawork>npm install -g vue

npm install -g vue
npm install -g vue-cli

2、再次cd到 CordovaProject 下运行创建vue项目

vue init webpack vue_app

生成的结构如下图

 

10、找vue_app项目路径下的config目录下的index.js进行修改，作用是将包打包cordova项目中

如我的路径为：C:\cordovawork\CordovaProject\vue_app\config\index.js

 

 

 11、移动到vue_app项目路径下

cd vue_app

12、 打包vue项目

npm run build

13、返回到应用程序CordovaProject下重新构建app

cordova build android

使用Android studio 打包项目为apk

安装好Android studio 之后，导入项目的时候选择import project(Gradle,Eclipse ADT,etc)，选择则platforms/android，选择build.gradle点击等待grade编译，如果编译失败，多数是gradle插件版本和gradle版本对应问题。等待IDE自动构建。。。 耐心等耐片刻就好,  此时的目录是

出现下图，项目导入成功

关于如何打包项目请看我的另一篇记录，路径：https://blog.csdn.net/qq_33238562/article/details/102739097