cordova + vue搭建混合app框架

通过npm安装 Cordova

1. 安装JDK 选择安装目录 安装过程中会出现两次 安装提示 。第一次是安装 jdk ，第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。（不能都安装在java文件夹的根目录下，jdk和jre安装在同一文件夹会出错）

   如下图所示

   

2. 1：安装jdk 随意选择目录 只需把默认安装目录 \java 之前的目录修改即可

   2：安装jre→更改→ \java 之前目录和安装 jdk 目录相同即可

   注：若无安装目录要求，可全默认设置。无需做任何修改，两次均直接点下一步。

   

   

3. 安装完JDK后配置环境变量  计算机→属性→高级系统设置→高级→环境变量

    

    

   

4. 系统变量→新建 JAVA_HOME 变量 。

   变量值填写jdk的安装目录（本人是 E:\Java\jdk1.7.0)

    

    

5. 系统变量→寻找 Path 变量→编辑

   在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

   （注意原来Path的变量值末尾有没有;号，如果没有，先输入；号再输入上面的代码）

   

6. 系统变量→新建 CLASSPATH 变量

   变量值填写   .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（注意最前面有一点）

   系统变量配置完毕

   

7. 检验是否配置成功 运行cmd 输入 java -version （java 和 -version 之间有空格）

    

    

   若如图所示 显示版本信息 则说明安装和配置成功。

   

Gradle环境变量的配置

配置GRADLE_HOME： 注意：一定要重启系统。

找到Android Studio中gradle的位置

E:\Android_Studio\gradle\gradle-2.10

配置GRADLE_USER_HOME:

找到一个盘符空间比较大的地方来重新放置.gradle文件

比如我就放在了E:\Android\.gradle

配置path:

在path中加入%GRADLE_HOME%\bin

接着，在命令提示符中查看path中是否已经添加成功了

 

如果在path中查看如果成功了，那么在命令提示符中输入gradle -v来查看gradle是否已经配置成功了

如果出现了gradle的版本信息的话，说明你已经配置成功了

首先请确保你在本地已经安装了NodeJS（可以调用npm命令）, 并且是联网状态的。如果不知道如何安装NodeJS, 请参考 ”四步完成NodeJS安装，配置和测试”。

第一步: 在命令行(CMD)里输入 npm install -g cordova

 

 

第二步：检测Cordova 的版本号，在命令行输入 cordova -version

 

 

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

    

 

 

   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项目，在该目录下进行前端代码开发：

 

 

 

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

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

    vue-src/config/index.js

    

 

 

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

   index.html

   

 

 

6. 打包

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

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

    

 

 

7. 效果