我的环境

  • 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. 十、RHEL Podman命令

    Podman介绍 Podman 是一个开源的容器运行时项目,可在大多数 Linux 平台上使用.Podman 提供与 Docker 非常相似的功能.正如前面提到的那样,它不需要在你的系统上运行任何守护 ...

  2. Bob 的生存概率问题

    Bob 的生存概率问题 作者:Grey 原文地址: 博客园:Bob 的生存概率问题 CSDN:Bob 的生存概率问题 题目描述 给定五个参数 n , m , i , j , k,表示在一个 n*m 的 ...

  3. 解决vue中对象属性改变视图不更新的问题

    在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会 ...

  4. Redis管理及监控工具推荐

    推荐一款Redis管理软件.[官网 http://www.redisant.cn/] 功能描述: 1. 键和字段CRUD和glob. 2. 适用于字符串.列表.散列.集合.有序集合. 通过漂亮的用户界 ...

  5. 专业的C头文件设计和重构指南

    头文件设计要点: 1. 头文件注释 2. guard define 3. 尽量不要在头文件中暴露数据结构 4. 要自包含,保证头文件独立编译和功能正确 5. 函数声明前加XXX_API利于拓展 6.  ...

  6. Pycharm2022.1.3安装教程（包含基础使用配置）

    pycharm的下载安装及使用 以我的Pycharm2022.1.3为例 首先去官网下载professtional(专业版)版本 2022.1.3版本Pycharm软件 https://www.jet ...

  7. 第2-4-9章 规则引擎Drools实战(2)-信用卡申请

    目录 9.2 信用卡申请 9.2.1 计算规则 9.2.2 实现步骤 9.2 信用卡申请 全套代码及资料全部完整提供,点此处下载 本小节我们需要通过Drools规则引擎来根据规则进行申请人的合法性检查 ...

  8. mysql-DuplicateUpdate和java的threadpool的"死锁"

    大家千万不要被文章的标题给迷惑了,他两在本篇文章是没有关系的, 今天给大家讲讲最近2个有意思的issue,分享一下我学到的 mysql DuplicateUpdate的用法要注意的点 java的thr ...

  9. WeakHashMap 和 HashMap 的区别是什么，何时使用？

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. 在之前的文章里,我们聊到了 Java 标准库中 HashMap 与 LinkedH ...

  10. JavaEE Day08 HTML&CSS

    今日内容 HTML标签:表单标签 CSS:页面样式控制,美化页面,完成页面布局 一.表单标签 1.概述 用于采集用户输入数据的,如输入的用户名和密码,用于与服务器进行交互 使用from标签  form ...