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 中的内存泄露模式
Aug 13 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
浅谈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中取得文件的后缀名?
2012/02/20 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
Python中的包和模块实例
2014/11/22 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
生产班组长岗位职责
2014/01/05 职场文书
护士节慰问信
2015/02/15 职场文书
数学教师求职信范文
2015/03/20 职场文书
小学六年级毕业感言
2015/07/30 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电