vue+cordova 开发混合app入门指南

本文介绍基于VUE+cordova开发混合式APP执行命令:一：npm install -g vue-cli 安装全局vue二：vue init webpack porjectNme （projectName是项目名字）三：cd porjectNme四：npm install --registry=https://registry.np

好多米阳光

9119人浏览 · 2017-10-17 13:44:45

好多米阳光 · 2017-10-17 13:44:45 发布

本文介绍基于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是发布环境（打包环境）

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

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}$/, //不连续的两位字母// /^