cordova+ vue-cli3 开发app (android)

cordova+ vue-cli3 开发app (android)

前期需要安装

javajdk androidSDK gradle 这三个东西以及环境变量配置,详细自己网上查阅文档

然后全局安装cordova

npm install -g cordova

检查安装是否完善 (会检查前面说的这4个东西是否安装完全)

cordova requirements

然后创建项目

cd到你想要创建项目的文件夹,cordova create是创建项目的命令,hello为本地文件夹名称,com.example.hello为项目id,HelloWorld为最后app的名称

cordova create hello com.example.hello HelloWorld

执行成功后,项目目录变成了这样

目录结构说明

hooks:存放自定义cordova命令的脚本文件。

config.xml :cordova的配置文件

www:工作目录,所有的html,js之类的文件默认加载到index.html,在cordova > >

prepare时被copy到各个平台的assert的www目录中

plugins:已安装的插件

platforms:各平台的工程目录,cordova编译工程时会将其覆盖

  1. 给你的App添加目标平台,现在我们添加android’平台,并确保他们保存在了config.xml中

cordova platform add android --save

  1. 检查你当前平台设置状况
cordova platform ls
  1. 打包
cordova build android进行打包

接下来就是 vue-cli在cordova目录下创建项目后

vue.config.js 如下

const path = require('path')
module.exports = {
  publicPath: './',
  outputDir: path.resolve(__dirname, '../www'),
  indexPath: 'index.html'
}

为了方便 我们可以把 vue打包 yarn run build 和 cordova run android在page.json中 用一个命令搞定

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "android": "vue-cli-service build & cordova run android",
    "build-android": "vue-cli-service build & cordova build android"
  },
  

在google上调试看请求

  • 在google地址栏上输入 chrome://inspect/#devices
  • 就能在remote target 看到已经连接的模拟器或者真机
  • 点击inspect,第一次点击进入需要翻墙,不然就是出现404或者空白
  • 然后就可以进行查看netWork和dom样式了。
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值