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

本文介绍基于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+cordova 开发混合app入门指南_第1张图片

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

下面创建cordova工程

一:npm install -g cordova   全局安装cordova
二:cordova create ProjectName   创建ProjectName cordova项目    
三:cd ProjectName
四:cordova platform add android   添加android平台(ios也如此————也可标注android版本(例如:··add [email protected]))
五:cordova run android  

vue+cordova 开发混合app入门指南_第2张图片这个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>
其他的都不需要修改。
 
  
html>

  
    charset="utf-8">
 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:;">
 name="format-detection" content="telephone=no">
 name="msapplication-tap-highlight" content="no">
 name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 rel="stylesheet" type="text/css" href="css/index.css">
    </span>vueapp<span style="color:#e8bf6a;">
  
  
    
id="app">
这个时候回到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,app,cordova)