当前位置: 移动技术网 > IT编程>脚本编程>vue.js > Vue.js 2.0和Cordova开发webApp环境搭建方法

Vue.js 2.0和Cordova开发webApp环境搭建方法

2019年06月06日  | 移动技术网IT编程  | 我要评论
html5开发app技术文档 一、环境参数 1、技术语言:html、css、es6、node.js等; 2、框架:vue.js 2.x、cordova; 3、开发系

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%\platform-tools;

c)在系统变量path添加,如下图所示

默认路径为c:\users\用户名\appdata\local\android\sdk\tools

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'命令,如下图所示,即表示环境变量配置成功。

三、cordova +vue 项目环境搭建

1、cordova

a)安装:npm install –g cordova

b)常用命令:

l 创建项目:cordova create 项目名;如下图所示,即成功创建。

l 添加平台:首先cmd进入创建的项目,然后执行cordova platform add android –save或cordovaplatform add ios –save,如下图所示,即成功创建。

l 检查平台设置状况:cordovaplatform ls ,如下图所示,即成功创建。

l 创建app:cordova build android或 cordova build ios,如下图所示,即成功创建。

l 测试app: cordova emulate android,如下图所示,即成功创建。

2、集成vue

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

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

c)npm install 安装vue项目开发依赖包,如下图所示,即成功。

3、项目相关说明

a)最终项目目录:

b)修改项:

l 清空www文件夹里面的文件

l 找到config文件夹,修改index。js

默认:

修改后:

l 开发好项目后,运行命令npm run build,接着运行cordova build android,最后cordovaemulate android,就可以预览项目。

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网