由Vue.js 2.0和Cordova开发的webApp环境的构建方法

HTML5开发APP技术文档

一.环境参数

1.技术语言：HTML、CSS、ES6、Node.js等。

2.框架：Vue.js 2.x，Cordova；

3.开发系统：mac、windows等。

4.环境配置：node 6 npm 3(最好下载Node.js的最新官方版本)、jdk1.8、SDK(请直接下载Androidstudio软件的最新官方版本，AndroidSDk已经集成，建议安装在默认路径)。

二、系统环境变量配置(以window7为例)

1.AndroidSDK配置

a)添加用户变量配置，如下图所示：

变量名：ANDROID_HOME

变量值：主要是安装路径，默认路径是C:\Users\用户名\AppData\Local\Android\sdk

b)添加用户变量PATH，如下图所示：

；% ANDROID _ HOME % \平台-工具；

c)添加系统变量PATH，如下图所示

默认路径是C: \用户\用户名\ appdata \本地\ Android \ SDK \工具

d)说明：在cmd环境下运行' ' android ' '命令，如下图所示，表示环境变量配置成功。

2.JDK构型

a)添加系统变量，如下图所示

变量名：JAVA_HOME

变量值：安装JDK目录

b)添加系统变量PATH，如下图所示：

；% JAVA _ HOME % \ bin

c)添加系统变量，如下图所示：变量名：CLASSPATH

变量值：% JAVA _ HOME % \ lib \ dt . jar；% JAVA _ HOME % \ lib \ tools.jar

d)说明：在cmd环境下运行命令' ' javac ' '，如下图所示，表示环境变量配置成功。

三.科尔多瓦VUE项目的环境建设

1、科尔多瓦

a)安装：npm安装-g cordova

b)常用命令：

l创建项目：cordova创建项目名称；如下图所示，创建成功。

l添加平台：首先cmd进入创建的项目，然后执行cordova平台添加android -save或者cordova platform添加ios -save，如下图所示，即创建成功。

l检查平台设置状态：cordovaplatform ls，如下图所示，即创建成功。

l创建APP:cordova构建安卓或cordova构建ios，如下图所示，即创建成功。

l测试APP: cordova模拟安卓，如下图所示，创建成功。

2.整合VUE

a)安装vue工具：npm install - g vue-cli

b)创建项目：首先cmd进入cordova创建的项目，然后执行vue init webpack，如下图所示，表示成功

C)npm install安装vue项目开发依赖包，如下图所示，表示成功。

3.项目相关描述

a)最终项目目录：

b)修改项目：

清空www文件夹中的文件

找到配置文件夹并修改索引。射流研究…

默认值：

修改后：

l开发完项目后，运行命令npm run build，然后cordova build android，最后cordovaemulate android，就可以预览项目了。