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 vuenpm 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

更多相关文章

随机推荐