vue 与 cordova 整合例子

最新推荐文章于 2024-07-19 17:14:42 发布
最新推荐文章于 2024-07-19 17:14:42 发布
阅读量823 收藏 4
点赞数
文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_ygang/article/details/111193412
版权
本文详细介绍了如何将Vue项目与Cordova结合，创建一个混合移动应用。首先，创建并配置Cordova项目，安装相机插件和Android平台。接着，创建Vue项目并编译，然后将Vue项目内容整合到Cordova的www目录下。最后，编译并运行Cordova项目，包括调试和签名打包的步骤。
摘要由CSDN通过智能技术生成

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, 将编译结果重新定向，如图

最低0.47元/天 解锁文章
wang_ygang
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue：前端体系与前后端分离
ZXLzhuzhu的博客
10-20 1618
Vue：前端体系与前后端分离 概述 介绍 ​ Vue(读音/viu/，类似于 view)是一套用于构建用户界面的渐进式框架，发布干 2014 年 2 月. 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅 易于上手，还便于与第三方库(如:vue-router:跳转，vue-resource:通信， vuex:管理)或既有项目整合。 官网:https://cn.vuejs.org/v2/guide/ 前端知识体系 想要成为真正的“互联网 Java 全栈工程师”还
Vue.js+Cordova开发H5混合应用（以Android为例，附说明文档和工程）
05-22
Vue.js+Cordova开发H5混合应用（以Android为例，附说明文档和工程）
Try --force to use installed plugin as dependency.
InforStack
05-17 2730
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
cordova使用vue进行开发
最新发布
HelloWorld的专栏
07-19 301
cordova vue
vue和cordova项目整合打包，并实现vue调用android的相机的demo
weixin_34072637的博客
03-31 1115
经过网上查找很多资料，发现很多只有vue+cordova的项目整合，但是vue使用cordova插件的文章很少，现在把从创建cordova和创建vue到vue使用插件到项目打包到android手机运行过程记录下来； 先上项目结构目录 cordova项目创建 1、安装cordova环境这个这边就不描述了，网上很多教程2、创建cordova...
vue移动端开发集成cordova打包，利用cordova相机插件实现相机调用
大牛的博客
11-07 7044
一、初始化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：前端体系、前后端分离
希望有点用
09-01 975
Vue：前端体系、前后端分离
精简vue
雙馬程序猿
10-24 1328
精简vue：1.vue概述与前端知识体系、2.前端发展史、3.了解前后分离的演变史、4.第一个Vue程序、5.基础语法指令、6.表单双绑和组件、7.Axios异步通信、8.计算属性-内容分发-自定义事件、9.第一个vue-cli项目、10.webpack使用、11.vue-router路由、12.实战快速上手
Vue
小陈学java
07-23 1993
前端体系，前后端分离 1、概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合。 2、前端知识体系 想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中“我大前端”是绕不开的一门必修课。本阶段课程的主要目的就是带领我.
用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 如
vue+phonegap（cordova）整合Android开发
看不到的结果
12-21 7724
Vue.js 是当下比较流行的前端框架，其以数据为中心的设计思想为开发者节省不不少DOM操作的时间，其中Vue广泛用于SPA的开发，基于这个特点，笔者想到将Vue和cordova进行整合，来进行Android的开发，由于网上的资源不多，自己利用之前所学简单配置了开发环境，以此分享开发经验，如有不足之处或者读者有跟好的想法，欢迎评论留言，批评指正。
cordova+vue项目整合
svygh123的专栏
02-10 860
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结合使用
aron_H1的博客
07-26 2571
1.Cordova与Vue结合使用，调用安卓基层功能     在完成我的上一篇文章所述的操作以后，我们就可以来完成以下的操作。 1.1 .在Cordova中创建Vue项目 命令行创建完Cordova 项目后，cd 项目名，使用vue-cli 创建Vue项目。 创建完毕的项目目录如右图。其中的Vue文件就是我们的H5项目        1.2 .项目中调用安卓功能          在...
cordova vue插件开发_Cordova+vue混合开发app中实现短视频拍摄功能
weixin_42524883的博客
12-29 595
在最近项目中需要实现一个前端拍摄短视频并上传后端的功能。最初考虑的实现方式是使用拍摄短视频的安卓sdk并且改成cordova插件。考虑目前做的比较成熟的sdk有七牛云的短视频拍摄sdk，功能强大。此sdk实现了类似与微信的按住拍摄松开停止的功能，并且可以自动转码并且上传七牛云服务器。但是缺点如下：1.sdk只提供函数接口，即使改成cordova插件页面也需要再重写一个类似于上图的vue页面，不如调...
vue + cordova 混合开发 app
qq_41186500的博客
02-25 641
一、环境搭建 nodeJS java jdk Android SDK 注：上述内容可自行百度 二、cordova 全局安装cordova npm install -g cordova 创建cordova项目 cordova create testcom.example.hello HelloWorld // 创建test项目 创建完项目要进入到项目 cd test 将项目添加到android平台 cordova platform add android 添加插件 命令：cord
Vue.js 2.0和Cordova开发webApp环境搭建
HangMine的博客
12-07 773
HTML5开发APP技术文档   一、环境参数 1、技术语言：HTML、CSS、ES6、Node.js等； 2、框架：Vue.js 2.x、Cordova； 3、开发系统：mac、windows等； 4、环境配置： node 6+ npm 3+ （最好下载Node.js官方最新版本） 、jdk1.8、SDK（请直接下载Androidstudio软件官方最新版本，
vue和springboot整合例子
05-31
下面是一个简单的Vue和Spring Boot整合的例子： 1. 创建Vue项目 使用Vue-cli创建Vue项目，具体步骤可以参考Vue官方文档。在创建时，可以选择使用Vue-router、Vuex等插件，根据需要进行选择。 2. 编写前端代码 在Vue项目中编写前端代码，使用Axios或者Fetch等HTTP请求库向Spring Boot发送HTTP请求，获取后端数据。具体实现可以参考Axios或Fetch的官方文档，这里不再赘述。 3. 创建Spring Boot项目 在IDE中创建Spring Boot项目，可以选择使用Spring Initializr或手动创建。在创建时，要选择Web依赖，这样才能提供RESTful API接口。 4. 编写后端代码 在Spring Boot项目中编写后端代码，提供RESTful API接口，接收Vue发送的请求，并返回相应的数据。具体实现可以参考Spring Boot官方文档，这里不再赘述。 5. 配置跨域问题 由于Vue和Spring Boot运行在不同的端口上，存在跨域问题。可以在Spring Boot项目中配置CORS过滤器，来解决跨域问题。具体实现可以参考Spring Boot官方文档，这里不再赘述。 6. 整合前端和后端 将Vue项目打包后的静态文件放置在Spring Boot项目的静态资源目录下，这样可以将Vue和Spring Boot整合在一起。在Spring Boot项目中配置静态资源目录，具体实现可以参考Spring Boot官方文档，这里不再赘述。 7. 运行项目 在IDE中启动Spring Boot项目，访问http://localhost:8080/index.html，就可以看到Vue项目的界面，向后端发送请求并获取数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值