我的环境

  • 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. 9_Vue事件修饰符

    概述 首先需要理解下什么是事件修饰符 常用事件修饰符 案例1_阻止默认行为发生 我这里有一个a标签 这个标签呢我会给它配置一个点击事件 点击事件输出一句话,那么效果是这样的 代码 <body&g ...

  2. 题解 P2080 增进感情

    \(\sf Link\) 爆搜最香了. 感觉有点像01背包(? 对于每件事,我们可以选择干或者不干,如果干就将好感值处理一下,当所有的事都搜完之后,记录最小值\(minn\) . 最终答案就是\(mi ...

  3. 四、Pod 介绍

    一.什么是 Pod ​Pod 是 kubernetes 集群中最小的部署和管理的基本单元,协同寻址,协同调度. ​Pod 是一个或多个容器的集合,是一个或一组服务(进程)的抽象集合. ​Pod 中可以 ...

  4. 二、Kubernetes 概念介绍

    一.Master ​ Master指的是集群控制节点,在每个Kubernetes集群里都需要有一个Master来负责整个集群的管理和控制,基本上Kubernetes的所有控制命令都发给它,它负责具体的 ...

  5. 分布式事务框架 Seata 入门案例

    1.  Seata Server 部署 Seata分TC.TM和RM三个角色,TC(Server端)为单独服务端部署,TM和RM(Client端)由业务系统集成. 首先,下载最新的安装包 也可以下载源 ...

  6. 网络协议之:redis protocol 详解

    目录 简介 redis的高级用法 Redis中的pipline Redis中的Pub/Sub RESP protocol Simple Strings Bulk Strings RESP Intege ...

  7. 更改安装Oracle数据库时设定的System sys等用户的密码

    因本地Oracle数据库安装久远,不知道连接账号密码,查阅了一些资料最终修改成功,Mark up! 1 在开始菜单找到Oracle服务,打开SQL plus 2 输入命令连接到数据库并修改部分用户密码 ...

  8. 云实例初始化工具cloud-init源码分析

    源码分析 代码结构 cloud-init的代码结构如下: cloud-init ├── bash_completion # bash自动补全文件 │   └── cloud-init ├── Chan ...

  9. perl遍历哈希的所有健和值

    my %h=("001",{name,"李白",age,"18",height,"185",weight,"6 ...

  10. 如何正确遵守 Python 代码规范

    前言 无规矩不成方圆,代码亦是如此,本篇文章将会介绍一些自己做项目时遵守的较为常用的 Python 代码规范. 命名 大小写 模块名写法: module_name 包名写法: package_name ...