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


Posted in Javascript onFebruary 26, 2018

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,就可以预览项目。

Javascript 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
Jun 01 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 #Javascript
详解Node 定时器
Feb 26 #Javascript
node.js基础知识小结
Feb 26 #Javascript
Es6 Generator函数详细解析
Feb 24 #Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 #Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 #Javascript
JS抛物线动画实例制作
Feb 24 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP的FTP学习(四)
2006/10/09 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
浅谈Javascript事件模拟
2012/06/27 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
Python基于回溯法解决01背包问题实例
2017/12/06 Python
Python实现随机漫步功能
2018/07/09 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
党员公开承诺书范文
2014/03/25 职场文书
经销商订货会主持词
2014/03/27 职场文书
关于环保的活动方案
2014/08/25 职场文书
电影雷锋观后感
2015/06/10 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
《包身工》教学反思
2016/02/23 职场文书
numpy数据类型dtype转换实现
2021/04/24 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android