欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-12-29 20:54:11
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

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

b)在用户变量path添加,如下图所示:

;%android_home%\platform-tools;

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

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

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

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

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

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

2、jdk配置

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

变量名:java_home

变量值:安装jdk目录

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

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

;% java_home%\ bin;

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

c )添加系统变量,如下图所示:
变量名:classpath

变量值:;.;%java_home%\lib\dt.jar;%java_home%\lib\tools.jar;

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

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

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

三、cordova +vue 项目环境搭建

1、cordova

a)安装:npm install –g cordova

b)常用命令:

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

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

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

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

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

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

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

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

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

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

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

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

2、集成vue

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

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

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

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

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

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

3、项目相关说明

a)最终项目目录:

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

b)修改项:

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

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

默认:

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

修改后:

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

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