cordova与vue2集成

cordova与vue2集成,第1张

1)先要安装 Node.js . 链接: https://nodejs.org/en/

2)安装cordova. 链接: http://cordova.apache.org/

终端步骤:

1)创建cordova的project

2)为cordova项目添加platform project

3)在相关平台运行app

4)用指定模拟器运行cordova工程

1)安装vue-cli

2)创建工程

*两个创建的工程放在平级

3)安装vue依赖包

4)安装Vue-router,颂搭伏Vuex和Mint-ui

5)修改webpack.config.js

path指的是我枝拿们cordova里的www/野携js目录,因为打包的时候会把所有js文件放到cordova工程的js目录下。

publicPath是指的一些公共资源(如图片,css文件)的加载路径。

6)最后修改cordova工程的www下的index.html文件

加入一个<div id="app"></div>和<script type="text/javascript" src="js/build.js"></script>

这里面就是vue生成的js

直接运行cordova run ios就可以看到效果了,我们已经将vue生成的文件运行了。

关于这个问题,还是看看官网是怎么说的吧:

翻译一下:

听上去蛮不错的,那么我们就开始用它来做一个app吧!

创建应用

如果按照Cordova( http://cordova.apache.org/ )官网所述,直接用npm全局安装 cordova ,并创建应用,你可能遇到以下错误:

此时不要紧张,卸载 cordova ,使用 yarn 重新安装一下,猜测可能和npm版本不兼容。

安装好 yarn 和 cordova 之后,使用cli命令 cordova create MyApp 创建project,此时你可能会遇到以下错误:

这是什么原因呢?

原来我们没有将 yarn 的bin目录加入到环境变量 path ,作为一个Windows僵尸粉,判断出这点还是不难的。执行以下命令,找到 yarn 的bin目录所在:

将 d:\Users\gy.wang\AppData\Local\Yarn\bin 此目录添加到windows环境变量 path

配置好环境,重新打开CLI窗口,我们终于可以顺利地创建 cordova 应用缺碧中,cordova使用默认模板创建好一个Project。

添加Android平台

在项目根目录下,运行命令 cordova build android 来编译你的项目,你可能遇到以下错误:

原因是啥呢?当前cordova要求的Android版本比较高,需要安装 Android SDK Platform 25 才能顺利编译,怎么办? 装!

打开 Android Studio , 安装SDK

安装成功之后,执行命令 cordova build android ,这慧信次终于成功了!

APK包成功打伏山好,这次我们运行一下,执行命令:

这次我们会遇到 环境坑四

不急,仔细看报错信息的意思是没有可用的设备或模拟器。这个简单,打开Android Studio添加一个:

再次运行 cordova run android , 哈! 这次成功了!

什么!闪退!WTF!

运行命令 cordova run android ,将APK包安装到模拟器上结果又报错了!

离成功就差一步了,别泄气!我们慢慢查找原因~

至此,APP终于搞定了!

1、cordova3.0.0的命令行cordoava CLI和phonegap CLI在windows系统上开发android程序的注意事项‘

a 首先要根据要求安装最新的android SDK,目前我的版本要求 SDk 17才能顺利进行

b 一定要配置好环境变量,把SDK's tools and platform-tools 目录配晌蚂置到你的环境变量中去,

另外还要把ANT也要配置到系统环境变量中去,如

%JAVA_HOME%\bin%ANT_HOME%\bin

2、cordovan3.0.0的插件可以用命令行远程从git添加,也可以下载下来从本地用命令行添加,两种方法的命令

是一样的,只需要把最后参数的远程地址改成本地路径即祥梁可

3、npm install -g cordova@XXXXX 可以指定要安装的cordova版本

4、把老版本的3.0.0以前谨谨运开发的程序升级到3.0.0的注意事项

a 需要新建一个cordova项目

b 把seerts里的www文件夹下的东西都复制过去,记住cordova.js文件不要替换,要用新创建的里面的cordova.js不要用旧的程序里的覆盖

c 把 src文件下的程序包都复制到新程序的src下面,需要修改所有的引用org.apache.cordova.api成org.apache.cordova,

这是新版本的cordova命名上的变化

d 先前程序中的android的访问权限设置需要在新程序中重新进行设置

e 把config.xml中添加的插件的格式在新的程序中按照新的格式重新进行整理


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/8262345.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-14
下一篇 2023-04-14

发表评论

登录后才能评论

评论列表(0条)

保存