vue+cordova 开发混合app入门指南

最新推荐文章于 2024-08-11 19:35:45 发布
最新推荐文章于 2024-08-11 19:35:45 发布
阅读量9k 收藏 14
点赞数 2
分类专栏： Vue app cordova 文章标签： vue cordova app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013216976/article/details/78259519
版权
Vue 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
app
1 篇文章 0 订阅
订阅专栏
cordova
1 篇文章 0 订阅
订阅专栏

本文介绍基于VUE+cordova开发混合式APP


执行命令:

一：npm install -g vue-cli   安装全局vue

二：vue init webpack porjectNme  （projectName是项目名字）

三：cd porjectNme

四：npm install --registry=https://registry.npm.taobao.org  （等价于npm install ，我使用淘宝镜像下载，速度会比较快）


五：npm run dev  （本地运行）

六：npm run build （打包，会生成dist文件）


上述成功创建vue项目的生成环境（src目录下）和发布环境（dist）

下面创建cordova工程

一：npm install -g cordova   全局安装cordova
二：cordova create ProjectName   创建ProjectName cordova项目    
三：cd ProjectName
四：cordova platform add android   添加android平台（ios也如此————也可标注android版本（例如：··add android@6.0.0））
五：cordova run android

这个www-base-test是我自己弄的，可以忽略


到这个步骤，cordova项目也创建完毕，这个时候打开 platforms\android\assets\www 目录下的index.html

拷贝里面的：六：npm run build （打包，会生成dist文件）

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
和JS 

<script type="text/javascript" src="cordova.js"></script>
其他的都不需要修改。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
 <meta name="format-detection" content="telephone=no">
 <meta name="msapplication-tap-highlight" content="no">
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>vueapp</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script type="text/javascript" src="cordova.js"></script>
</html>
这个时候回到vue项目
重新打包
npm run build
把重新打包后dist文件里面的文件拷贝到cordova项目下的www里面（platforms\android\assets\www （可删掉这个文件夹下原本的文件））
好啦！重新执行 

cordova run android
OK ,测试打包完成啦！（platforms\android\build\outputs\apk     文件下会生成apk文件，也可以直接插上手机连调哦！）


以上是基于vue+cordova的全过程。至于搭建Android 环境，自己百度。

注：vue中：src下是生产环境

      dist是发布环境（打包环境）

每次修改后记得重新打包！

好多米阳光
关注
专栏目录
Cordova框架搭建的混合APP如何实现热更新（生产环境亲测有效）
ouyangli2011的博客
07-17 879
配置静态资源服务器，我这里直接选用tomcat容器作为资源服务器，有nginx服务器的可以选择nginx做静态资源服务器。 在tomcat的conf目录下配置server.xml文件,在Host节点下增加如下配置 <Context path="/cordovafiles" docBase="C:\file\" reloadable="true" debug="0" crossContext="true"/> 配置后在你的C盘file目录下随意放一个文件 ，例如chcp.json 通过htt..
vue+cordova开发移动APP项目
七七的博客
07-16 2765
vue+cordova开发移动APP项目 一、环境(版本及配置) 1、node 12.13.1 执行命令查看版本 node -v 显示版本号则安装成功。 2、cordova 9.0.0 执行命令查看版本 cordova -v 显示版本号则安装成功。 3、vue cli 2.9.6 执行命令查看版本 vue -V 显示版本号则安装成功。 4、Android SDK 安装及配置环境 执行命令查看安装成功 adb 显示如此则表示安装配置完成。 5、gradle 6.0 执行命令查看版本
vue+cordova+mui制作的移动app
10-08
应用vue+cordova+mui开发的安卓和ios应用程序，已经下载好node_modules依赖，直接可以编译使用。开发工具我使用的是vscode
Vue.js+Cordova开发H5混合应用（以Android为例，附说明文档和工程）
05-22
Vue.js+Cordova开发H5混合应用（以Android为例，附说明文档和工程）
初识安卓——基础概念介绍
最新发布
SouthernNights的博客
08-11 1747
安卓四层体系结构、Binder、沙箱、签名、SELinux等概念简介
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+cordova混合开发app
farme_guan的博客
04-01 809
Cordova/Phonegap是一种跨平台应用开发工具，能将html文件打包成android和ios，下面介绍下vue项目中调用cordova插件方法 在VUE项目中index.html文件引入cordova.js 在main.js中，注册vue之前加上cordova监听事件，确保cordova初始化完成再执行vue注册 我将cordova所有的调用方法封装成单独的js文件，然后...
vue+cordova开发混合app
caimaomaocai的博客
12-31 285
1、引用vue-cli-plugin-cordova 代码仓库https://github.com/m0dch3n/vue-cli-plugin-cordova 2、命令步骤 $ npm install -g @vue/cli //如果已经安装vue-cli此步骤可省 $ vue create my-app $ cd my-app $ npm install -g cordova /...
Android、h5（vue）之cordova 混合开发
qq_30304193的博客
12-11 4187
目录 前言 一、cordova 简介 二、Cordova使用 2.1 环境安装         2.1.1 Node.js安装         2.1.2 Cordova安装            2.1.3 Ant安装 2.2 创建Cordova app 2.2.1 命令创建Cordova app项目 2.2.2 创建Android项目 2.2.3 导入到Android s...
vue + cordova 混合开发 app
qq_41186500的博客
02-25 644
一、环境搭建 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
用Cordova打包Vue项目的方法步骤
10-17
主要介绍了用Cordova打包Vue项目的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
搭建vue3+cordove的APP混合开发流程
u010086298的专栏
09-15 2020
前言 目前来说主流的App开发方式有三种：Native App(原生APP开发模式)、Hybrid App(混合模式移动应用)、Web App(嵌入HTML5移动应用)。如果项目针对性能以及计算没有特别大的要求，强力推荐Hybrid APP(混合模式移动应用)。技能快速开发也能和ios和android进行底层交互。整体搭建效果属于Mac中用ios虚拟机，如下是详细开发环境搭建流程。 一、环境依...
使用 Cordova 跨平台打包 Vue
nonlinearthink的博客
10-24 715
想要更好的阅读体验，可以转我的个人博客。 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 文
Try --force to use installed plugin as dependency.
InforStack
05-17 2738
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+IDEA开发Hybrid App（一）
Max_Mac
09-07 4210
1.安装node和npm 2.安装Cordova Cli npm install -g cordova 3.安装了Cordova Cli以后就可以使用命令新建一个项目了 cordova create MyApp （具体步骤可以参见cordova官网） 4.我们使用idea来新建项目，首先需要在idea中安装cordova插件 5.在settings->plugins->Browse
如何使用Cordova构建混合移动应用
m0_75198698的博客
05-05 642
执行上述命令后，Cordova将构建应用程序的发布版本，并在platforms/android/app/build/outputs/apk/release目录。- Android SDK：下载并安装最新版本的Android SDK，可以从https://developer.android.com/studio/index.html下载。一旦您满意您的应用程序，您可以将其打包并部署到应用商店。这将在您选择的平台上构建应用程序，并生成一个二进制文件，可以在相应的应用商店中发布或直接在设备上安装。
Cordova使用（vue）
weixin_34192816的博客
03-13 970
概览 Cordova Cordova 能够将你的 HTML/JS 代码打包在一个原生的容器中运行，并且可以调用系统的各类软硬件接口（JavaScript API）。我们将这种架构称之为 hybrid app , 得益于这种架构，我们能将前端代码跨平台运行，并且得到接近原生应用的系统特性。最终发布到各大应用市场，包括苹果的 App Store。 Cordova 插件 Cordova 通过插件的生...
vue&cordova混合应用
leida_wt的博客
04-01 3809
Vue+VUX ui库+Cordova打包混合应用 模板工程详见文末pan链接 1.项目的Cordova基本命令 初始化文件夹 cordova create cordova-app com.lxlazy.www.app cordovaApp 进入 cd cordova-app 添加平台使用630API不然找不到 cordova platform add android@6....
webpack + vue + node 创建单页应用入门指南
"本文将带你通过webpack、vue和node构建一个单页面应用，主要涉及技术包括：node.js环境搭建、npm/cnpm使用、vue-cli及webpack的安装、vue-router的集成，以及基本的项目构建和运行流程。" 在现代前端开发中，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值