基于Cordova+Vue+IDEA开发Hybrid App（一）

最新推荐文章于 2025-09-20 17:18:10 发布
原创 最新推荐文章于 2025-09-20 17:18:10 发布 · 4.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何结合Cordova、Vue和IDEA开发Hybrid App。首先，安装node、npm及Cordova CLI创建项目。接着，在IDEA中安装Cordova插件，使用Vue CLI初始化项目，并将Vue编译目标设置为Cordova的www目录。通过配置，实现了Vue编译后自动将文件放入Cordova工程并打包为apk。然而，项目仍存在不能在IDEA中打开Android Monitor和缺少Cordova JS集成的问题，需要后续解决。

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 repositories中查找cordova，安装即可
这里写图片描述

6.重启后，可以再new project中选择。
这里写图片描述

7.可以看出来，idea cordova插件也是通过Cordova Cli来实现新建项目工程的。

最低0.47元/天 解锁文章
vue开发移动端app-学习记录
weixin_44736005的博客
01-29 1万+
目录 项目框架搭建 连接真机调试 打包apk发布 4 Vuex学习 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。 https://vuex.vuejs.org/zh/guide/ npm install vuex --save 项目的适配 因为移动端设备屏幕大小，屏幕比例什么的差别比较大，
Vue学习-1-入门
baidu_38126306的博客
11-03 668
Vue 狂神说 1. 概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue的核心库只关心视图层View，方便与第三方或既有项目整合； 遵循SoC原则关注点分离原则； HTML + CSS + JS ：视图，给用户看，刷新后台给的数据； 网络通信：Axios； 页面跳转：Vue-router 状态管理：Vuex Vue-UI：ICE，Element U
vue开发看这篇文章就够了
weixin_33841722的博客
01-03 626
Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别？ Library 库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQ...
Cordova打包Vue项目成APK——真机调试
最新发布
人之功成皆凭己为，何来侥幸之说！
09-20 833
Apache Cordova 是一个开源移动开发框架，允许使用HTML/CSS/JS构建跨平台应用。本文详细介绍了Cordova的安装配置及APK打包流程： 环境准备： 安装Node.js和Cordova CLI 配置Java JDK、Android SDK和Gradle 设置ANDROID_HOME等环境变量 项目创建： 使用cordova create命令初始化项目 添加Android平台支持 打包流程： 修改Vue项目的publicPath配置 执行npm run build打包前端资源 将生成文件复
如何用idea开发vue
weixin_44235530的博客
03-30 8774
文章目录一、建脚手架二、使用步骤1.把项目拉入idea 。 提示：以下是本篇文章正文内容，下面案例可供参考 一、建脚手架 下载node和vue脚手架 C:\> node -v v10.14.1 C:\>npm install -g @vue/cli C:\>vue create vue 二、使用步骤 1.把项目拉入idea 配置serve 如果想自动跳转页面在配置文件package.json 的scripts的serve加--open ...
IntelliJ IDEA创建第一个Vue工程
02-26 2762
1.1 基本概念（基本概念来自网络学习） 1.1.1 node.js Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.j...
IDEA中Vue开发环境搭建
yinshengchen的博客
04-18 1万+
要解决 “npm ERR!missing script: build” 错误，我们需要在 package.json 文件中定义一个名为 “build” 的构建脚本。找到项目根目录中的package.json文件，这里列出了项目所依赖的所有资源与版本号，右键该文件，打开于终端，输入npm install 命令安装所有依赖；在上述代码中，我们添加了一个名为 “build” 的构建脚本，该脚本使用 webpack 进行生产模式构建。(3) 右侧“Scripts”处输入“dev”，其它idea已经默认选好。
Vue.js构建用户界面的渐进式框架(前端学习笔记1.0)
outsiderg的博客
04-20 5214
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import.
【跨平台兼容性不再是难题】：自动打卡App技术挑战全解析
!... # 摘要 跨平台兼容性是指软件应用能够在不同的操作...本文首先介绍了跨平台兼容性的概念及其重要性，随后阐述了跨平台应用开发的理论基础，包括开发模型、框架选择、设计原则和兼容性测试方法。接着，通过自动打卡App
ecw2c理解元数据：使用BigQuery k-means将4,000个堆栈溢出标签聚类
热门推荐
cunehu1722的博客
07-24 6万+
您如何将超过4,000个活动的Stack Overflow标签分组为有意义的组？ 对于无监督学习和k均值聚类来说，这是一项完美的任务-现在您可以在BigQuery中完成所有这些工作。 让我们找出方法。 Visualizing a universe of clustered tags. Felipe Hoffais a Developer Advocate fo...
如何用idea创建vue项目
Kaspar_w的专栏
02-20 441
首先要搭建环境，检查四个版本：node-v,npm-v,cnpm-v,vue-V.以及vue命令回车。 首先安装node,npm. 安装cnpm(淘宝镜像):在命令行输入npm install -g cnpm --registry=https://registry.npm.taobao.org,等待安装完成 全局安装vue-cli，npm install--globalvue-cli 检查完毕。 首先需要在idea上安装一个VUE.JS的插件,位置settings—>Plugins–&g..
基于vue开发的头条app（含源码）
05-09
基于vue开发的类似今日头条的app，包含了源码，下载后可直接运行。
使用idea和vecode创建vue项目并启动（超详细）
le12345678934694的博客
10-09 6123
创建项目之前先下载好插件新建项目找到vue生成器写好名称，找到自己需要存放的地址，node解释器安装方式可以看我上一个博客，vueCLI是选择vue的版本，我们可以使用idea自带的vue版本默认是vue3，创建速度会很快，这是一个简洁版本，也可以选择自己下载好的vue版本。加载完后，项目就创建好了，idea创建项目非常的简单易懂，我给大家展示一下默认idea自带的vue和下载的区别创建项目非常迅速端口号（默认）：5173版本是3.x启动项目速度非常快创建项目需要加载资源。
手把手教程-使用idea创建vue项目
Wang_ning__的博客
10-24 1万+
小编在第一次通过IDEA使用Vue创建脚手架时，对于网上那么多方法真实头大，在经过多次的测试后，终于有一种简单直接的方法，费话不多说，上操作方法和相应的截图。
IDEA搭建Vue开发环境(安装Node.js、安装vue-cli、创建项目、编译项目、启动项目、yarn启动项目、npm和yarn命令行命令简单使用)
Bulut0907
07-22 1万+
因为这个yarn和Hadoop的yarn命令会冲突，所以修改E:\install_software\Node.js\node-v20.4.0-win-x64路径下的yarn.cmd名称为yarnJs.cmd。使用IDEA打开项目, 然后在File–Settings–Plugins–Makerplace搜索vue.js, 安装并重启IDEA。再将E:\install_software\Node.js\node-v20.4.0-win-x64目录配置到环境变量。进入项目目录，安装项目所需依赖。
idea创建Vue项目流程
m0_64005688的博客
03-26 4493
idea从0开始安装vue并学习相关知识
cordova + Vue 开发 APP 上手指南
天道酬勤
03-06 607
转自：https://www.jianshu.com/p/2e9bebb73d37
在Idea中配置和测试Vue项目的完整指南
weixin_42284380的博客
06-04 2294
Vue.js，简称Vue，是一个渐进式JavaScript框架，用于构建用户界面。它最初由前Google工程师尤雨溪于2014年发布。Vue的设计思想旨在通过尽可能简单的API实现响应式数据绑定和组合的视图组件。Vue CLI与Vue.js紧密相关，但二者并不是一回事。Vue.js是一个构建用户界面的渐进式框架，它专注于视图层；而Vue CLI是用于Vue.js项目的脚手架工具，它基于Vue.js，提供了一套完整的命令行接口来快速搭建项目结构、管理依赖、配置开发服务器等。
Hybrid App基础知识
qq_44875145的博客
07-16 5888
一.App开发概述 1.Web App Web App开发，严格来说并不是一个App软件，只是一个web型的微网站。 优点:开发时间短，兼容性强，方便系统移植。 缺点:必须有网络的支持，用户体验度相对较差。 2.Native App Nactive App开发，就是一个原生的App软件，其只要通过Java或Object-C来实现原生手机App软件。 优点:原生App,用户体验度非常好，可以调用手机的底层软件。 缺点:开发时间长，兼容性差，必须掌握Java或Object-C等编程语言。 3.HyBrid A
cordova+vue3
01-04
为了使 Cordova 项目能够支持 Vue3，需要先创建一个新的 Cordova 应用程序并初始化 Vue CLI 工程。这可以通过安装 `vue-cli-plugin-cordova` 来简化流程[^1]。 ```bash npm install -g @vue/cli vue create my-app ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值