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

发布了46 篇原创文章 · 获赞 9 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_33238562/article/details/102797724