我的环境

  • Node v16.13.0
  • npm v8.1.0
  • mac的话需要安装Xcode
  • windows的话需要Java 8 JDK和Android Studio软件

本文以安卓开发为例

找一个自己喜欢的路径，全局安装Vue cli

npm install -g @vue/cli

生成VUE项目,根据需求选取自己需要的版本

vue create vue-capacitor-demo



启动项目

cd vue-capacitor-demo

npm run serve

在Web浏览器中访问 http://localhost:8080/

再打开一个cmd窗口，集成Capacitor到我们的VUE项目

npm install --save @capacitor/core @capacitor/cli

初始化Capacitor

npx cap init

使用Capacitor插件--我的其他文章里有，等下我把链接放进来

构建应用程序,添加平台

npm run build

添加平台

npm run build

npm install @capacitor/android

npx cap add android

npx cap copy

运行，自动打开AS软件



npx cap open android

运行成功，可以开始调试啦

超详细版本vue+capacitor（自定义capacitor插件）编写移动端应用的更多相关文章

  1. RabbitMQ安装说明文档（超详细版本）

    RabbitMQ安装说明文档(超详细版本) 1. 安装依赖环境 在线安装依赖环境: yum install build-essential openssl openssl-devel unixODBC ...

  2. 如何用uniapp+vue开发自定义相机插件——拍照+录像功能

    调用手机的相机功能并实现拍照和录像是很多APP与插件都必不可少的一个功能,今天智密科技就来分享一下如何基于uniapp + vue实现自定义相机界面,并且实现: 1: 自定义拍照 2: 自定义录像 3 ...

  3. Jquery不同版本共用的解决方案（插件编写）

    最近在为某公司做企业内部UI库,经过研究分析和评审,决定基于Jquery开发,结合Bootstrap插件那简洁,优雅,高效的思想进行插件编写. 但是在编写的过程中遇到一个头疼的问题,就是正在编写的插件 ...

  4. mongoDB 安装和配置环境变量，超详细版本

    下载mongoDB进行安装:https://www.mongodb.com/                                                 到Community Se ...

  5. cena评测系统：自定义校验器（自定义评测插件编写）

    Cena评测系统,最受欢迎的信息学竞赛离线评测系统. 它是开放源程序的信息学竞赛评测系统,能满足大多数程序设计竞赛的测评需求. 特色功能: 通过局域网自动收取选手程序. 高效率的数据文件配置工具. 自 ...

  6. vue命令式组件和插件编写

    一直在写各种业务,好多基本用法都忘记了,回顾一下: 一.vue各种UI库里的命令式组件比如element-ui里Notification组件,可以这样调用 this.$notify({ title: ...

  7. 超详细的Cookie增删改查

    目录 1,什么是 Cookie? 1.1,存储形式 1.2,常用属性 1.3,大小限制 2,增 or 改Cookie 3,查Cookie 4,删Cookie 1,什么是 Cookie? Cookie是 ...

  8. ionic+vue+capacitor系列笔记--capacitor3.X和2.X+android自定义capacitor的JSbridge插件注册与使用(不同版本注册方式不同，返回值格式也不同，使用方法也不同）

    经过我的多番折腾,终于搞明白了这个东西的用法,不同版本的注册方法,使用方法都不一样,现在把这个折腾的结果记录下来,造福大家~ 首先编写一个类,然后注册,注意,这个和2.x不一样,2.x的时候我们会使用 ...

  9. 超详细手把手教你cordova开发使用指南+自定义插件，jsbridge

    Cordova是什么 使用前端技术 开发跨平台web App的工具 底层原理:HTML+CSS搭建页面, JS和原生交互 交互原理:Cordova插件 环境配置 安卓开发基础环境搭建的文章可以参考一下 ...

随机推荐

  1. "一键重装系统软件"操作流程

    博主之前重装系统都是直接用win10系统更新里的重置系统(版本不会变化),和U盘重装电脑出厂映像(有各种品牌自带的软件,而且由于是出场版本,版本很低) 所以这次用"小白一键重装系统" ...

  2. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  3. MyBatis&Spring Framrwork

    1. MyBatis 1.1 概述 MyBatis是一款优秀的持久层框架,用于简化JDBC开发 MyBatis本是Apache的一个开源项目iBatis,2010年这个项目迁移到了google cod ...

  4. windows安装nodejs

    安装nodejs 1.官网地址: http://nodejs.cn/download 2.选择下载路径 直接无脑下一步安装 3.安装成功之后 node -v 显示nodejs版本 npm -v 显示安 ...

  5. Emgu实现图像分割

    C#通过Emgu这个图像处理库,可以很方便的将一幅单通道图像分割为R.G.B三个单通道图像. Image<Bgr, Byte> ImageBGR = null; Image<Bgr, ...

  6. 13、设计一个函数process，在你调用他的时候，每次实现不同的功能，输入a，b两个数， 第一次调用时找出a，b中的最大者。 第二次找出最小者，，第三次求两个数的和。

    /* 设计一个函数process,在你调用他的时候,每次实现不同的功能,输入a,b两个数, 第一次调用时找出a,b中的最大者. 第二次找出最小者,,第三次求两个数的和. */ #include < ...

  7. [排序算法] 希尔排序 (C++)

    前言 本文章是建立在插入排序的基础上写的喔,如果有对插入排序还有不懂的童鞋,可以看看这里. 直接/折半插入排序 2路插入排序 希尔排序解释 希尔排序 Shell Sort 又名"缩小增量排序 ...

  8. 春秋云境 CVE-2022-24663复现

    靶标介绍: 远程代码执行漏洞,任何订阅者都可以利用该漏洞发送带有"短代码"参数设置为 PHP Everywhere 的请求,并在站点上执行任意 PHP 代码.P.S. 存在常见用户 ...

  9. (Java)设计模式：创建型

    前言 这篇内容是从另一篇:UML建模.设计原则 中分离出来的,原本这个创建型设计模式是和其放在一起的 但是:把这篇创建型设计模式放在一起让我贼别扭,看起来贼不舒服,越看念头越不通达,导致老衲躺在床上脑 ...

  10. 产生10个1-20以内的随机数，要求不能重复（集合）Java

    public class Demo{ //产生10个1-20以内的随机数,要求不能重复 public static void main(String[] args){ //新建集合存放随机数 Set& ...