我的环境

  • 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. JS逆向实战4--cookie——__jsl_clearance_s 生成

    分析 网站返回状态码521,从浏览器抓包来看,浏览器一共对此地址请求了三次(中间是设置cookie的过程): 第一次请求:网站返回的响应状态码为 521,响应返回的为经过 混淆的 JS 代码:但是这些 ...

  2. 我的Spark学习笔记

    一.架构设计 Driver根据用户代码构建计算流图,拆解出分布式任务并分发到 Executors 中去:每个Executors收到任务,然后处理这个 RDD 的一个数据分片子集 DAGSchedule ...

  3. 【Azure 环境】把OpenSSL生产的自签名证书导入到Azure Key Vault Certificate中报错

    问题描述 通过本地生成的自签名证书导入到Azure Key Vault Certificate报错. 错误信息 the specified PEM X.509 certificate content ...

  4. 1分钟完成在线测试部署便捷收集班级同学文件的web管理系统

    最近CSDN推出了一个新功能[云IDE],个人对这个新功能(比赛奖金 )挺感兴趣的,于是瞬速地拿之前自己搞的一个便捷收集班级同学文件的web管理系统(下面简称该项目为cfile)体验了一下,发现功能还 ...

  5. Windows版CheatSheet——一键显示当前程序快捷键列表

    Windows系统上的各种软件有太多的快捷键,想要记住是几乎不可能的,推荐一个一键显示当前软件快捷键的软件,在使用其他程序的时候,只要按下Ctrl+`就可以理解弹出该软件的所有快捷键列表,还支持收藏功 ...

  6. perl静态变量

    state操作符功能类似于C里面的static修饰符,state关键字将局部变量变得持久. state也是词法变量,所以只在定义该变量的词法作用域中有效,举个例子: #!/usr/bin/perl u ...

  7. Xtrabackup使用帮助

    目录 1.安装工具 2.下载后上传到需要备份的服务器 全备 1.安装完成后我们进行数据库备份执行以下命令 2.查看备份的数据 3.进入数据库,删除一个测试库 4.删除school库 5.备份数据目录 ...

  8. python学习——查找计算机中的文件

    # import os # # path = 'C:/Users/admin/Desktop/images' # files = os.listdir(path) # # for f in files ...

  9. 基于python的数学建模---二维插值的三维图

    import numpy as np from mpl_toolkits.mplot3d import Axes3D import matplotlib as mpl from scipy impor ...

  10. MVC开发单元测试小工具 —— 搜寻还没写单元测试的方法

    方法比较笨,有更好的建议可以提. 写这个工具呢,因为要写单元测试,保证代码质量,方便修改维护.一切为了自己方便.当然这个算是个人开发的项目 1.MVC中控制器建立个基类(这个光明正大的抄袭的),控制往 ...