vue 与 cordova 整合例子

最新推荐文章于 2024-08-19 10:02:12 发布

原创

最新推荐文章于 2024-08-19 10:02:12 发布 · 891 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

本文详细介绍了如何将Vue项目与Cordova结合，创建一个混合移动应用。首先，创建并配置Cordova项目，安装相机插件和Android平台。接着，创建Vue项目并编译，然后将Vue项目内容整合到Cordova的www目录下。最后，编译并运行Cordova项目，包括调试和签名打包的步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装jdk ；安卓开发环境sdk
2、安装node.js
3、安装cordova开发环境
4、创建cordova 项目
cordova create HashApp
添加平台环境【首选进入项目目录HashApp，在该目录下执行下面的命令】
在这里插入图片描述

cordova platform add android
查看平台环境
cordova platform

安装插件—相机功能的
cordova plugin add cordova-plugin-camera

编译项目
cordova build android

运行项目[如果没有安装安卓模拟器这里会提示找不到，但是可以根据提示到平台下debug文件夹下找到.app文件]
cordova run android
cordova run browser

5、创建vue项目
在HashApp项目下创建vue目录保存vue项目；然后进入该目录创建vue项目

vue init webpack vue-example
编译项目
npm run build
运行项目
npm run dev

6、整合vue项目与cordova
修改vue-example/config/index.js, 将编译结果重新定向，如图

在这里插入图片描述

之后再执行vue

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wang_ygang

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用 Cordova 跨平台打包 Vue

nonlinearthink的博客

10-24

1118

想要更好的阅读体验，可以转我的个人博客。 Cordova 安装使用 npm 安装 cordova 命令行: npm install -g cordova 创建 Vue 项目: vue create cordova-test 找了一圈 Vue 的 Cordova 插件，个人觉得最好用的是这个: vue-cli-plugin-cordova-simple。这位老哥写得这么好，都没人帮他宣传。 vue add vue-cli-plugin-cordova-simple 新建 vue.config.js 文

Vue：前端体系与前后端分离

ZXLzhuzhu的博客

10-20

1765

Vue：前端体系与前后端分离概述介绍 Vue(读音/viu/，类似于 view)是一套用于构建用户界面的渐进式框架，发布干 2014 年 2 月. 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库(如:vue-router:跳转，vue-resource:通信， vuex:管理)或既有项目整合。官网:https://cn.vuejs.org/v2/guide/ 前端知识体系想要成为真正的“互联网 Java 全栈工程师”还

参与评论您还未登录，请先登录后发表或查看评论

Try --force to use installed plugin as dependency.

InforStack

05-17

2805

cordova plugin add cordova-plugin-camera Installing "cordova-plugin-camera" for android Failed to install 'cordova-plugin-camera': CordovaError: Version of installed plugin: "cordova-plugin-compat@1.0

vue和cordova项目整合打包，并实现vue调用android的相机的demo

weixin_34072637的博客

03-31

1186

经过网上查找很多资料，发现很多只有vue+cordova的项目整合，但是vue使用cordova插件的文章很少，现在把从创建cordova和创建vue到vue使用插件到项目打包到android手机运行过程记录下来；先上项目结构目录 cordova项目创建 1、安装cordova环境这个这边就不描述了，网上很多教程2、创建cordova...

vue移动端开发集成cordova打包，利用cordova相机插件实现相机调用

大牛的博客

11-07

7190

一、初始化vue脚手架注：安装完vue环境之后（vue环境配置，网上找） vue init webpack myvue 1、参数解释：vue init--->初始化vue项目命令，webpack--->利用webpack模式，myvue----->vue项目名称。 2、初始化完成之后，可使用npm run dev在开发模式进行运行。二、初始化cor...

cordova打包vue2（webpack）android、ios app

热门推荐

码农笔录-微信公众号博客

07-19

3万+

使用cordova打包vue2（webpack）app for android1、vue项目通过vue-cli脚手架建立项目，使用webpack进行打包，下边是一整套命令。 #npm 版本最好是最新的，升级npm，node版本也有要求 npm i -g npm# 安装脚手架 npm install -g vue-cli#初始化新建项目 vue init webpack vue-app# inst

Vue学习-1-入门

baidu_38126306的博客

11-03

622

Vue 狂神说 1. 概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层View，方便与第三方或既有项目整合；遵循SoC原则关注点分离原则； HTML + CSS + JS ：视图，给用户看，刷新后台给的数据；网络通信：Axios；页面跳转：Vue-router 状态管理：Vuex Vue-UI：ICE，Element U

Vue：前端体系、前后端分离

希望有点用

09-01

1288

Vue：前端体系、前后端分离

Vue与HBuilderX融合秘籍：快速构建跨平台移动应用

本文旨在深入探讨Vue.js框架与HBuilderX开发环境的集成使用，重点介绍了Vue.js的核心概念、进阶实践以及性能优化策略。同时，本文也详细阐述了HBuilderX的环境搭建、项目初始化以及跨平台代码共享与管理方法。通过...

vue+phonegap（cordova）整合Android开发

看不到的结果

12-21

7785

Vue.js 是当下比较流行的前端框架，其以数据为中心的设计思想为开发者节省不不少DOM操作的时间，其中Vue广泛用于SPA的开发，基于这个特点，笔者想到将Vue和cordova进行整合，来进行Android的开发，由于网上的资源不多，自己利用之前所学简单配置了开发环境，以此分享开发经验，如有不足之处或者读者有跟好的想法，欢迎评论留言，批评指正。

Vue.js+Cordova开发H5混合应用（以Android为例，附说明文档和工程）

05-22

Vue.js+Cordova开发H5混合应用（以Android为例，附说明文档和工程）

用Cordova打包Vue项目的方法步骤

10-17

主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

vue-cordova：Cordova的Vue.js插件

02-06

于插件注意：兼容每个版本的VueJS（1.x和2.x）您可能不需要Vue-Cordova 重要提示：你不需要的Vue，科尔多瓦与科尔多瓦或访问科尔多瓦插件使用Vue公司Vue公司从组件。 Vue-Cordova是一个实用程序，可在Vue.cordova下的Vue组件中提供以下插件： cordova-plugin-camera cordova-plugin-device cordova-plugin-geolocation cordova-plugin-contacts cordova-plugin-chrome-apps-sockets-tcp cordova-plugin-sms 如

cordova+vue项目整合

svygh123的专栏

02-10

1050

1.cordova项目新建 : learn-cordova 安装: $npm install -g cordova 版本: $cordova -v 创建: $cordova create learn-cordova 环境: $cordova platform add browser --save 还可选平台:android/ios $cordova platform add android $cordova platform add android@6.0.0 // 版本为...

cordova使用vue进行开发

HelloWorld的专栏

07-19

659

cordova vue

VUE+cordova打包apk

小唐的博客

11-30

2098

上面说过自己的vue 项目通过 npm run build 打包好的静态文件 static 和 index.html复制到 www 的文件夹下替换。可以通过官网安装也可以通过 android studio 进行安装配置好环境变量可以查询资料。打包好以后会出现一下图片我们需要的是静态资源（static）以及 index.html。生成的证书要跟打包好的项目放在一个文件夹内。这时候文件夹下会出现你创建好的项目文件。您的名字与姓氏是什么：【自己写】这个时候可以打包自己的项目。

Cordova与Vue结合使用

aron_H1的博客

07-26

2658

1.Cordova与Vue结合使用，调用安卓基层功能在完成我的上一篇文章所述的操作以后，我们就可以来完成以下的操作。 1.1 .在Cordova中创建Vue项目命令行创建完Cordova 项目后，cd 项目名，使用vue-cli 创建Vue项目。创建完毕的项目目录如右图。其中的Vue文件就是我们的H5项目 1.2 .项目中调用安卓功能在...

Vue CLI 插件Cordova 使用教程