我的环境

  • 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. python查找相似图片或重复图片

    1.查找重复图片 利用文件的MD5值可查找完全一样的重复图片 import os,time,hashlib def getmd5(file): if not os.path.isfile(file): ...

  2. RAID5部署

    软RAID与备份盘 1.此处我们还用刚才的4块盘做演示,三块盘做raid,一块盘做备份盘,防止磁盘故障 我们以raid 5 来配置三块磁盘 加上一块备份盘 [root@local-pyyu tmp]# ...

  3. Workflow，要不要了解一下

    摘要:Workflow本质是开发者基于实际业务场景开发用于部署模型或应用的流水线工具. Workflow(也称工作流,下文中均可使用工作流进行描述)本质是开发者基于实际业务场景开发用于部署模型或应用的 ...

  4. JS逆向实战6-- x轴 y轴 过点触验证码

    点触验证码是一种常见的反爬手段 解决方案有两种:一种是直接解决,这需要深度学习机器学习等图像处理技术,以大量的数据训练识别模型,最终达到模型足矣识别图片中的文字提示和应该点击的区域之间的对应关系. 这 ...

  5. 开箱即用 yyg-cli（脚手架工具）：快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  6. miniconda使用

    基本指令 conda create -n xxx python=3.7 // 创建Python3.7的名为xxx虚拟环境 conda env list // 显示所有的虚拟环境 conda activ ...

  7. Emgu实现图像分割

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

  8. WIN10使用SSH连接VMWare16 Pro的CentOS8.4（保姆级）

    目录 本机环境 配置连接 本机环境 连接工具用的是MobaXterm,下载地址https://mobaxterm.mobatek.net/download.html VMWare16 Pro Cent ...

  9. go语言单元测试：go语言用gomonkey为测试函数或方法打桩

    一,安装用到的库1,gomonkey代码的地址: https://github.com/agiledragon/gomonkey 2,从命令行安装gomonkey go get -u github.c ...

  10. 1759D(数位变0）

    题目链接 题目大意: 给你两个整数n, m.你需要求一个数,它满足如下条件: 是n的整数倍,且倍数小于m. 你应该使其末尾的0尽可能的多(如100后面有2个零,1020后面有一个零,我们应该输出100 ...