cordova + vue搭建混合app框架
通过npm安装 Cordova
-
安装JDK 选择安装目录 安装过程中会出现两次 安装提示 。第一次是安装 jdk ,第二次是安装 jre 。建议两个都安装在同一个java文件夹中的不同文件夹中。(不能都安装在java文件夹的根目录下,jdk和jre安装在同一文件夹会出错)
如下图所示
-
1:安装jdk 随意选择目录 只需把默认安装目录 \java 之前的目录修改即可
2:安装jre→更改→ \java 之前目录和安装 jdk 目录相同即可
注:若无安装目录要求,可全默认设置。无需做任何修改,两次均直接点下一步。
-
安装完JDK后配置环境变量 计算机→属性→高级系统设置→高级→环境变量
-
系统变量→新建 JAVA_HOME 变量 。
变量值填写jdk的安装目录(本人是 E:\Java\jdk1.7.0)
-
系统变量→寻找 Path 变量→编辑
在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)
-
系统变量→新建 CLASSPATH 变量
变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)
系统变量配置完毕
-
检验是否配置成功 运行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. 效果