使用cordova + vue搭建混合app框架

1. 前言:在进行hybrid app开发时,可以采用vue.js前端框架进行h5页面开发,然后使用跨平台cordova工具打包成app,如android或ios等,再h5页面也可以使用cordova丰富的插件调用原生代码,获取设备相关信息、调取手机摄像头等

 2. 创建cordova项目

   1) 创建cordova项目

    前提:安装node和cordova,安装方式很简单,自行百度就可以了

    cordova create cordovaApp com.test.cordova myApp

    使用cordova + vue搭建混合app框架_第1张图片

   2)创建平台

    进入cordovaApp目录

    cordova platform add android 创建android平台

    或cordova platform add ios 创建ios平台

    3)cordova打包命令,打包成apk的时候使用

    cordova build android  此时会将cordovaApp/www目录下的文件打包成apk文件,即可安装到手机

3. 在cordova项目目录下创建vue 项目

    在当前cordova项目目录下,使用vue-cli脚手架创建vue项目

    vue init webpack vue-src
   

4. vue项目创建完成后的混合app框架如下,其中vue-src目录是vue项目,在该目录下进行前端代码开发:

使用cordova + vue搭建混合app框架_第2张图片

   5. 修改vue配置,完成hybrid app框架搭建

     1) 使vue项目的build输出路径指向cordova目录下的www

    vue-src/config/index.js

    使用cordova + vue搭建混合app框架_第3张图片

    2)vue项目的index.html页面加入cordova.js

   index.html

   使用cordova + vue搭建混合app框架_第4张图片

6. 打包

    如果需要调用原生api,可使用cordova插件,可百度;

    开发完vue项目后,进入vue项目,运行npm run build 打包vue项目,这样vue项目的打包后的文件就会直接放在cordova项目的www目录下;然后运行cordova build android打包安卓应用(apk),即可安装运行在手机上;

    使用cordova + vue搭建混合app框架_第5张图片

7. 效果

使用cordova + vue搭建混合app框架_第6张图片

你可能感兴趣的:(cordova,vue)