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 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
vue 递归组件的简单使用示例
Jan 14 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
php学习之function的用法
2012/07/14 PHP
PHP 错误处理机制
2015/07/06 PHP
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
英国床垫在线:Mattress Online
2016/12/07 全球购物
欢送退休感言
2014/02/08 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
2014年高考决心书
2014/03/11 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
投资合作意向书范本
2015/05/08 职场文书
2019个人工作总结
2019/06/21 职场文书
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫