本文介绍基于VUE+cordova开发混合式APP


执行命令:

一：npm install -g vue-cli   安装全局vue

二：vue init webpack porjectNme  （projectName是项目名字）

三：cd porjectNme

四：npm install --registry=https://registry.npm.taobao.org  （等价于npm install ，我使用淘宝镜像下载，速度会比较快）


五：npm run dev  （本地运行）

六：npm run build （打包，会生成dist文件）


上述成功创建vue项目的生成环境（src目录下）和发布环境（dist）

下面创建cordova工程

一：npm install -g cordova   全局安装cordova
二：cordova create ProjectName   创建ProjectName cordova项目    
三：cd ProjectName
四：cordova platform add android   添加android平台（ios也如此————也可标注android版本（例如：··add android@6.0.0））
五：cordova run android

这个www-base-test是我自己弄的，可以忽略


到这个步骤，cordova项目也创建完毕，这个时候打开 platforms\android\assets\www 目录下的index.html

拷贝里面的：六：npm run build （打包，会生成dist文件）

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
和JS 

<script type="text/javascript" src="cordova.js"></script>
其他的都不需要修改。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
 <meta name="format-detection" content="telephone=no">
 <meta name="msapplication-tap-highlight" content="no">
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>vueapp</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script type="text/javascript" src="cordova.js"></script>
</html>
这个时候回到vue项目
重新打包
npm run build
把重新打包后dist文件里面的文件拷贝到cordova项目下的www里面（platforms\android\assets\www （可删掉这个文件夹下原本的文件））
好啦！重新执行 

cordova run android
OK ,测试打包完成啦！（platforms\android\build\outputs\apk     文件下会生成apk文件，也可以直接插上手机连调哦！）


以上是基于vue+cordova的全过程。至于搭建Android 环境，自己百度。

注：vue中：src下是生产环境

      dist是发布环境（打包环境）

每次修改后记得重新打包！

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue