搭建vue3+cordove的APP混合开发流程

前言

目前来说主流的App开发方式有三种：Native App(原生APP开发模式)、Hybrid App(混合模式移动应用)、Web App(嵌入HTML5移动应用)。如果项目针对性能以及计算没有特别大的要求，强力推荐Hybrid APP(混合模式移动应用)。技能快速开发也能和ios和android进行底层交互。整体搭建效果属于Mac中用ios虚拟机，如下是详细开发环境搭建流程。

一、环境依赖

环境依赖：vue3.11.0

cordove9.0.0

图1 项目目录结构图

1、创建cordove项目

详细安装cordove官方网站：http://cordova.axuer.com/docs/zh-cn/latest/guide/cli/index.html
创建cordoveApp工程流程如下:

$cordova create cordova-app

添加android/ios平台

cd cordova-app
cordova platform add android
cordova platform add ios
#以上依据自身的平台环境

打包app安装到手机上（前提是手机连上电脑并开启use调试模式）

cordova run android
或
cordove run ios
#依据自身平台环境

如果直接单纯的打包apk再自己拷贝到手机上安装也行：

cordova build android
或
cordova build ios
#依据自身平台环境

打包出来的apk在cordova-app/platforms/android/app/build/outputs/apk/debug/app-debug.apk目录

运行cordova app 项目ios效果如下：

图2 运行效果图

2、创建vue项目

如果没有安装vue则安装命令如下：

npm install -g @vue/cli-service-global

创建vue项目

vue create app-web

vue提供默认配置、自定义配置两种选择，这里我们选择Manually select features(自定义模式)

配置vue工程信息如下：

询问是否使用history路由模式？（有hash和history 2种模式）
如果使用history模式的话，路由上就没有#号，好看点，但是需要后端配合
具体说明查看官方文档HTML5 History 模式

如上选择n

之后一直回车键(Enter)

如上图vue项目创建成功。

运行测试vue项目

cd app-web
npm run serve

浏览器测试vue项目

如果读者如上操作都完成并出现应有大效果，证明cordove和vue项目都以完全创建成功。

2、向cordove内嵌入vue构建完成项目，配置vue的vue.config.js

vue3.0以上后减少很多文件目录，所有需要用户手动创建vue.config.js文件并填写对应内容。

cd app-web
touch vue.config.js

vue.config.js内容如下：

module.exports = {//基本路径publicPath: './',//输出文件目录outputDir: '../cordova-app/www',productionSourceMap:false, //不生成map
}

配置完成后，将vue项目app-web打包。

npm run build

会在cordova-app/www/js生成相应文件

如上完成后直接打包/运行cordova项目

cd cordova-app
cordova run ios
或
cordova run android
#读者可依据自身环境选择对应命令

ios环境结果如下：

如上vue3+cordove初步搭建流程已完成，需要读者多多关注，后续将持续跟新下去。也可+关注哦亲

搭建vue3+cordove的APP混合开发流程相关推荐

如何搭建直播app系统开发流程及难点的介绍
5G时代,天各一方的两个人将可以实现更深层次的社交体验和相互协作,同时5G也会将全世界更紧密的连接在一起,进一步推动社会群体意识的形成.从现在的发展趋势来简单分析,暂时还没有什么行业能对直播行业形成竞 ...
谈谈Android App混合开发
推酷文章站点主题公开课活动客户端荐周刊登录谈谈Android App混合开发时间 2015-08-25 20:13:43bxbxbai 原文 http://bxbxbai.gi ...
技术总监之路——App项目开发流程
App项目开发流程一. 需求阶段 1. 初期由leader或者项目责任人和PM沟通下阶段开发计划,确认需求的可行性和优先级等初步达成共识 2. 接下来PM提供详细UE文档(需求颗粒感尽可能小)发起三 ...
手机APP系统开发流程
手机APP系统开发流程,随着移动互联网的发展,越来越多人拥有手机,手机APP也成了风口,手机app软件开发已经成为时代的潮流,大部分创业者看准了商机找专业的服务平台服务商去开发一款属于自己的商业APP ...
一个APP的开发流程
一个APP的开发流程如何开发app的呢? 1.app界面设计开发: 通过客户提出需求,需要头脑风暴得出合适的方案和设计理念; 确认页面风格,确定整个界面的布局.关键截面的设计.文字.及其他的设计 ...
App混合开发-前端小白理解
什么是混合app 混合开发的App(Hybrid App)就是嵌一个轻量级的浏览器,一部分原生的功能改为Html5来开发,这部分功能不仅能够在不容升级的情况下动态更新,而且可以在Android或iOS ...
企业拼团APP商城开发流程6步曲
在2022年这个商城满天飞的年代,拼团商城开发APP在都是要以用户体验为中心点,消费者不满意拼团商城就是失去其价值.在选择一家拼团商城开发公司的时候提前做好市场调研工作,在进行需求整理之后,才真正开始 ...
Hybird APP混合开发升级方法
hybrid app开发的优势优点不用说了,但在这里,我们将重点关注混合系统中模块包的升级过程. 服务器维护压缩包的版本列表 Apppid 表示每个模块的唯一 ID 版本表示相应模块的版本号,递增 U ...
Hybrid APP 混合开发模式的选择之路（三）
原文出处:http://www.cnblogs.com/dailc/p/5930231.html 现在概念上的APP诞生是在Google推出Android,Apple推出iOS后,从这时候开始,就有了 ...

搭建vue3+cordove的APP混合开发流程

搭建vue3+cordove的APP混合开发流程相关推荐

最新文章

热门文章