vue + cordova实现跨平台android的开发

前言:当前主流的跨平台框架有flutter , react native , cordova等等,这些框架的优越性笔者这里就不一一赘述了,选择什么框架主要是看公司的具体需求进行选择。如笔者选择cordova的原因大部分是为了通过electron对Windows的支持,废话我们少说直接开始。

一,环境安装

nodejs: 大家可以通过官网下载LTS版本,默认选择安装即可。地址:https://nodejs.org

vue:终端输入:

npm install -g @vue/cli 

cordova: 终端输入:(官网地址:
https://cordova.apache.org/)

npm install -g cordova

android(cordova)

1、jdk : 如果你做的项目没有对cordova有固定版本需求,建议结合android studio的jre版本去oracle官方网站下载对应的jdk LTS版本。如果对cordova有版本需求需要结合cordova的官方版本进行选择jdk版本,如cordova 8版本就得需要jdk1.8版本。关于怎么配置jdk需要配置系统环境path,网上搜索“jdk的配置”(结合使用的系统配置即可)太多了这里就不一一赘述了。

jdk地址:
https://www.oracle.com/java/technologies/java-se-glance.html (注:下载jdk需要oracle的账号,你可以自己注册一个,不建议去非官方网站去下载)

验证配置成功方式:终端输入java和javac如果有很多信息打印出来,那么恭喜你jdk配置成功了

cordova android查考:

地址:
https://cordova.apache.org/docs/en/10.x/guide/platforms/android/#page-toc-source

2、gradle: 跟jdk差不多,根据cordova版本的需求去下载和系统path配置(具体配置网上搜索“gradle的配置”结合使用的系统配置即可),地址:
https://gradle.org/releases/

验证成功方式:终端输入gradle如果有很多信息打印出来,那么恭喜你gradle配置成功了

cordova android查考:

地址:
https://cordova.apache.org/docs/en/10.x/guide/platforms/android/#page-toc-source

3、android studio : 的安装很简单大家可以根据自己的电脑情况在安装完android studio第一次后把sdk安装进容量大点的硬盘,下载地址:
https://developer.android.google.cn/studio

二、vue项目构建(假设我们的项目名为:vue-demo),以下是笔者根据需求的选择供大家参考。

终端输入:vue create vue-demo

1、

vue + cordova实现跨平台android的开发

2、

vue + cordova实现跨平台android的开发

3、

vue + cordova实现跨平台android的开发

4、

vue + cordova实现跨平台android的开发

5、

vue + cordova实现跨平台android的开发

6、

vue + cordova实现跨平台android的开发

7、

vue + cordova实现跨平台android的开发

8、构建成功后我们可以通过执行以下命令校验是否构建成功

  npm run serve

三、cordova项目构建

1、终端cd到vue-demo目录下执行:

cordova create native-cordova

2、接着我们cd进native-cordova目录下添加android环境,终端命令:

cordova platform add android

如图:

vue + cordova实现跨平台android的开发

3、使用android studio 打开目录“
vue-demo/native-cordova/platforms/android”,之后在android studio下打开模拟器,如果没有就自己创建一个,如图

vue + cordova实现跨平台android的开发

vue + cordova实现跨平台android的开发

4、测试看cordova构建是否成功

vue + cordova实现跨平台android的开发

vue + cordova实现跨平台android的开发

四、@vue/cli-配置,如图:(图中的文件需要自己添加并在添加的文件中输入这些内容)

vue + cordova实现跨平台android的开发

vue + cordova实现跨平台android的开发

vue + cordova实现跨平台android的开发

vue + cordova实现跨平台android的开发

把public中的index.html移到项目目录下

vue + cordova实现跨平台android的开发

vue + cordova实现跨平台android的开发

vue + cordova实现跨平台android的开发

配置cli:如,可通过 npm run start:cordova 命令直接android项目并自动打开模拟器安装vue-demo

vue + cordova实现跨平台android的开发

至此我的的项目基本搭建完成了

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/tech/28238.html

发表评论

登录后才能评论